Question

我没有使用标签，因此我无法使用colspan属性。

我想在第一行创建一个包含三个单元格的表，最后一行包含一个单元格，其他行包含两个单元格。

这是我的代码（最小）：

.row {
    display: table-row;
}
.cell {
    display: table-cell;
}

HTML：

<div style="display: table;">
     <div class="row" style="width: 100%;">
            <div class="cell" style="width: 33% !important;">
                aaaa
            </div>
            <div class="cell" style="width: 33% !important;">
                bbbbb
            </div>
            <div class="cell" style="width: 33% !important;">
                ccccc
            </div>
      </div>
      <div class="row" style="width: 100%;">
            <div class="cell" style="width: 50% !important;">
                ddddd
            </div>
            <div class="cell" style="width: 50% !important;">
                eeeee
            </div>
      </div>
      <div class="row" style="width: 100%;">
            <div class="cell" style="width: 50% !important;">
                fffff
            </div>
            <div class="cell" style="width: 50% !important;">
                ggggg
            </div>
      </div>
      <div class="row" style="width: 100%;">
            <div class="cell" style="width: 100% !important;">
                last cell
            </div>
      </div>
</div>

这就是我得到的（我无法发布图片）：http://gyazo.com/cc036ed406f6c1a166955522d40e05b0.png

Answer 1

您尝试使用div模拟表格。为什么？ <table>标签就是针对这种表格数据制作的。

Answer 2

我会按如下方式构建此布局。

对于HTML：

<div class="parent">
     <div class="row r3">
            <div class="cell">aaaa</div>
            <div class="cell">bbbbb</div>
            <div class="cell">ccccc</div>
      </div>
      <div class="row r2">
            <div class="cell">ddddd</div>
            <div class="cell">eeeee</div>
      </div>
      <div class="row r2">
            <div class="cell">fffff</div>
            <div class="cell">ggggg</div>
      </div>
      <div class="row r1">
            <div class="cell">last cell</div>
      </div>
</div>

并应用以下CSS：

.row {
    display: table;
    border: 1px dashed blue;
    width: 100%
}
.cell {
    display: table-cell;
    border: 1px dotted blue;
}
.r3 .cell {
    width: 33.333333%;
}
.r2 .cell {
    width: 50%;
}
.r1 .cell {
    width: 100%;
}

对每个宽度为100％的display: table块元素使用div.row。

您不需要明确定义CSS表格行，将根据需要匿名创建一个。

参见参考：http://www.w3.org/TR/CSS2/tables.html#anonymous-boxes

请参阅演示：http://jsfiddle.net/audetwebdesign/72yb5th2/

每行的列数不同

2 个答案: