如何模拟带有 div 和 css 的表格？答案

【问题标题】：How do I emulate a table with divs & css?如何模拟带有 div 和 css 的表格？
【发布时间】：2012-12-28 14:12:05
【问题描述】：

这样的表：

<table>

  <tr>
   <td> ... </td>
   <td> ... </td>
   <td> ... </td>
  </tr>

  <tr>
   <td> ... </td>
   <td> ... </td>
   <td> ... </td>
  </tr>

  ...
</table>

如何使用 div 和 css display:table 规则创建一个？

【问题讨论】：

类似帖子stackoverflow.com/questions/3053205/…
我不知道我的案例是否符合表格数据的条件。这是一个包含应该显示为树的信息的列表（它有展开/折叠按钮）。我尝试使用列表（UL 和 DL），但我需要 3 列，而不是两列，并且它们必须完全对齐。例如，如果第 1 列有 1 行，第 2 列有 3 行，则第 1 列应扩展其高度以匹配第 2 列。表格会自动执行此操作
@thelolcat 您认为最少有多少列才能成为表格（提示：超过 1）？如果您有 3 列，并且每行都有 A、B 和 C，那么这听起来像是表格数据。

标签： css html-table

【解决方案1】：

试试这个;)

CSS

.table {
    display: table;
    width: 500px;
}
.tr { 
    display: table-row; 
}
.td { 
    display: table-cell;
}

HTML

<div class="table">
    <div class="tr">
        <div class="td">asdf</div>
        <div class="td">asdf</div>
        <div class="td">asdf</div>
    </div>
    <div class="tr">
        <div class="td">asdf</div>
        <div class="td">asdf</div>
        <div class="td">asdf</div>
    </div>
</div>

【讨论】：