HTML5：您能否仅使用 CSS 将 20x1 表格呈现为 10x2 表格？答案

【问题标题】：HTML5: Can you render a 20x1 table as a 10x2 table using only CSS?HTML5：您能否仅使用 CSS 将 20x1 表格呈现为 10x2 表格？
【发布时间】：2018-05-02 00:24:45
【问题描述】：

我有一个 20 行 1 列的标准 HTML 表格。

该表格是标准的“老式”HTML 表格，由标准表格标签组成：

<table>
  <thead></thead>
  <tbody>
    <tr><td>Row 1</td></tr>
    <tr><td>Row 2</td></tr>
    <tr><td>Row 3</td></tr>
    <tr><td>Row 4</td></tr>
    <!-- ... -->
    <tr><td>Row 19</td></tr>
    <tr><td>Row 20</td></tr>
  </tbody>
</table>

在这个应用程序中，这可能是对 <table> 标记的误用，并且应该以 <dl>、<dt>、<dd> 格式完成……但这是另一次讨论。

我想知道是否有一种纯 CSS 方法可以将单列表格制作成多列，特别是 10 行和 2 列，从这种格式中获取我当前的表格：

+-----------+
|     1     |
+-----------+
|     2     |
+-----------+
|     …     |
+-----------+
|     20    |
+-----------+

转成这种格式：

+-----------+-----------+
|     1     |     2     |
+-----------+-----------+
|     …     |     …     |
+-----------+-----------+
|     19    |     20    |
+-----------+-----------+

【问题讨论】：

标签： css html

【解决方案1】：

当然。当然，最好的方法是内容的语义 HTML，但我知道这并不总是可以做到的。

更改表格元素显示模式的最简单方法。在不知道您拥有的确切布局的情况下，我决定将其更改为一个简单的弹性框，尽管您可以使用任何适合您需要的显示模式。 inline-block 具有固定宽度，block 与 float: left 等都可以类似地工作。

*{box-sizing:border-box}table{border:1px solid green}tr{border: 1px solid red}td{border: 1px solid blue}

tbody {
  width: 600px;
  display: flex;
  flex-wrap: wrap;
}

tr {
  flex: 50%;
}

<table>
  <tbody>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
    <tr><td>4</td></tr>
    <tr><td>5</td></tr>
    <tr><td>6</td></tr>
    <tr><td>7</td></tr>
    <tr><td>8</td></tr>
    <tr><td>9</td></tr>
    <tr><td>10</td></tr>
  </tbody>
</table>

【讨论】：