DIV 和 CSS 如何与 Rowspan 和 Colspan 一起使用？答案

【问题标题】：How DIV & CSS work with Rowspan & Colspan?DIV 和 CSS 如何与 Rowspan 和 Colspan 一起使用？
【发布时间】：2017-07-15 06:25:32
【问题描述】：

我研究了几天关于如何使用div创建表格单元格和合并单元格，实际上我可以用TABLE做到这一点，但不能在DIV中做同样的屏幕结果，希望有人能帮助我更好地推动我方法或修复代码。

实际上，我想让所有单元格在全屏模式下具有相同的宽度和高度（合并区域除外），但问题是合并单元格在中心。我尝试了很多方法都不能让它像 TABLE 样式一样工作。

这是我想要的结果，但是用表格制作：

<style>
html, body{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
table {
    border-width: 1px 1px 0px 0px;
    border-spacing:0;
    margin:0;
    padding:0;
    width: 100%;
    height: 100%;
}
td { 
    border-width: 0px 0px 1px 1px;
}
table, td {
    border-style: solid;
    border-color: purple;
}
.w25 {
    width:25%;
    height:25%;
}
.w50 {
    width:50%;
    height:50%;
}
.w100 {
    width:100%;
    height:100%;
}
</style>
<table class='w100'>
    <tr>
        <td class='w25'>D</td>
        <td class='w25'>E</td>
        <td class='w25'>F</td>
        <td class='w25'>G</td>
    </tr>
    <tr>
        <td class='w25'>C</td>
        <td class='w50' colspan=2 rowspan=2 >MERGED AREA</td>
        <td class='w25'>H</td>
    </tr>
    <tr>
        <td class='w25'>B</td>
        <td class='w25'>I</td>
    </tr>
    <tr>
        <td class='w25'>A</td>
        <td class='w25'>L</td>
        <td class='w25'>K</td>
        <td class='w25'>J</td>
    </tr>
</table>

这是我目前为 DIV 版本制作的代码，但没有成功平衡全屏的所有宽度和高度。

<style>
html, body{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
.table {
    border-width: 1px 1px 0px 0px;
}
.intable {
    border-width: 0px 1px 0px 0px;
}
.table, .intable {
    display:table;
    width:100%;
    height:100%;
}
.cell {
    display:table-cell;
}
.row {
    display:table-row;
}
.cell {
    border-width: 0px 0px 1px 1px;
    width:25%;
}
.table, .intable, .cell {
    border-style: solid;
    border-color: purple;
}
</style>
<div class='table'>
    <div class='row'>
        <div class='cell' style="max-width:25%;">D</div>
        <div class='intable'>
            <div class='cell'>E</div>
            <div class='cell'>F</div>
        </div>
        <div class='cell'>G</div>
    </div>
    <div class='row'>
      <div class='intable'>
        <div class='row'>
          <div class='cell'>C</div>
        </div>
        <div class='row'>
          <div class='cell'>B</div>
        </div>
      </div>
      <div class='cell'>Merged Area</div>
      <div class='intable'>
        <div class='row'>
          <div class='cell'>H</div>
        </div>
        <div class='row'>
          <div class='cell'>I</div>
        </div>
      </div>
    </div>
    <div class='row'>
        <div class='cell'>A</div>
        <div class='intable'>
            <div class='cell'>L</div>
            <div class='cell'>K</div>
        </div>
        <div class='cell'>J</div>
    </div>
</div>

Table Version JSFiddle

DIV Version JSFiddle

希望有人可以修复代码！

【问题讨论】：

问题是什么？您似乎在问如何在使用 CSS 表格时模拟 HTML colspan 和 rowspan，即使用 display: table 等而不是 HTML table 元素。您试图实现的目标并不明显。但无论如何，答案是你做不到：CSS 表格模型本质上比 HTML 表格模型简单。
我建议使用table 结构，或者使用divs 和display: inline-block 属性重构。 display: table & display: table-row 会破坏你的结构。

标签： html css html-table css-tables

【解决方案1】：

尝试将另一个类添加到合并列中，如下所示：

<div class='cell merged'>Merged Area</div>

并更改合并区域的 css，如下所示：

.merged{
    width:50%;
    height:50%;
}

我这样做的原因是因为您在合并区域上有相同的类，但您希望大小占用正常单元格空间的两倍。所以我所做的只是添加一个额外的类来改变合并区域的宽度和高度以获得所需的结果。

这是一个更新的小提琴：

https://jsfiddle.net/6hx2uooz/4/

【讨论】：