css - HTML5 : Can you render a 20x1 table as a 10x2 table using only CSS?

Question

我有一个 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    |
+-----------+-----------+

Answer 1

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

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

*{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>