试图在类似CSS的表中布局div

Question

我正在努力遵守最佳实践，不使用表，但我正在尝试使用div设置固定宽度的表布局。

桌子：768px宽1024px高
第1行：56像素高
单元格1:56px宽单元格2:600px宽单元格3:112px宽
第2排：912高
单元格1:56px宽单元格2:600px宽单元格3:112px宽
第3行：56像素高
单元格1:56px宽单元格2:600px宽单元格3:112px宽

我在CSS中正确设置了第一行：

section { display: table; width: 768px;}
div { display: table-cell; height:56px; border: 1px solid #000;} /* height:56px; */
#top_gutter { width:56px; height:56px; }
#title { width:600px; height:56px; }
#top_margin { width:112px; height:56px; }

但是后续的行不能正确显示。我尝试了很多不同的方法，但我没有发现我做错了什么。我尝试过设置<section2>和<div2>，但也不起作用。

关于我做错了什么，有什么建议吗？

Answer 1

这里有一个使用div的创建可自定义表的选项

.cell {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 1px solid black;
  border-radius: 3px;
}

<div class="table">
  <div class="row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  <div class="row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  <div class="row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
</div>

在这个例子中，你可以对这个结构应用你自己的约束，例如，如果你想为整个表格宽度设置768px，你可以通过以下方式实现：

.table {
    width: 768px;
}

或者为奇数行设置40px的高度：

.row:nth-child(2n+1) {
    height: 40px;
}