Question

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

该表是标准的“old-school”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>标记的误用，应该以{{1}}，<dl>，<dt>格式完成...但是这是另一次讨论。

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

<dd>

采用以下格式：

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

Answer 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>

HTML5：您是否可以仅使用CSS将20x1表格渲染为10x2表格？

1 个答案: