显示：表格属性不起作用，我想要一个不使用表格元素的表格答案

【问题标题】：Display: table property is not working, I want a table without using table element显示：表格属性不起作用，我想要一个不使用表格元素的表格
【发布时间】：2020-05-25 18:32:45
【问题描述】：

我想使用 css 属性 display: table 创建一个表格，但不使用 table 元素。也寻找示例，但没有帮助。任何人都可以创建一个至少有 3 行和 3 列的表格。

【问题讨论】：

希望您至少尝试自己编写代码。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。

标签： html css html-table display

【解决方案1】：

此示例显示了以下display 值的用法：

table
table-row
table-cell
table-header-group
table-row-group
table-footer-group

div {
  padding: 5px;
}

#table {
  margin: 0 auto;
  display: table;
  border: 1px solid green;
}

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

.table-cell {
  width: 150px;
  text-align: center;
  display: table-cell;
  border: 1px solid black;
}

#thead {
  display: table-header-group;
  color: white;
  background-color: red;
}

#tbody {
  display: table-row-group;
  background-color: yellow;
}

#tfoot {
  display: table-footer-group;
  color: white;
  background-color: blue;
}

<div id='table'>
  <!-- table head -->
  <div id="thead">
    <div class="table-row">
      <div class="table-cell">head 1</div>
      <div class="table-cell">head 2</div>
    </div>
  </div>
  <!-- table body -->
  <div id="tbody">
    <div class="table-row">
      <div class="table-cell">cell 1.1</div>
      <div class="table-cell">cell 1.2</div>
    </div>
    <div class="table-row">
      <div class="table-cell">cell 2.1</div>
      <div class="table-cell">cell 2.1</div>
    </div>
  </div>
  <!-- table foot -->
  <div id="tfoot">
    <div class="table-row">
      <div class="table-cell">foot 1</div>
      <div class="table-cell">foot 2</div>
    </div>
  </div>
  <!-- table end -->
</div>

【讨论】：