尝试在CSS类表中布局div

Question

我试图坚持最佳实践，不使用使用表，但我尝试使用div设置一个固定宽度的表布局。

表:768宽1024高

第1行:56 Row高

单元1: 56宽单元2: 600宽单元3: 112宽

第2行: 912高

单元1: 56宽单元2: 600宽单元3: 112宽

第3行:56 Row高

单元1: 56宽单元2: 600宽单元3: 112宽

我正确地设置了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>

​

在本例中，您可以在此结构上应用您自己的约束，例如，如果您想为整个表的宽度设置768 it，可以通过以下方法实现：

.table {
    width: 768px;
}

或为奇数行设置高度40 Or：

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