html - CSS 表格重塑为 2 列

Question

我有一个 html 表格，其中包含以下结构化数据：

<table>
  <tr><td>label1</td><td>value1</td></tr>
  <tr><td>label2</td><td>value2</td></tr>
  <tr><td>label3</td><td>value3</td></tr>
  ...
</table>

这是一个很长的清单。我希望能够在第 n 行旁边的每个 n+1 行，如下所示：

<table>
  <tr><td>label1</td><td>value1</td></tr><tr><td>label2</td><td>value2</td></tr>
  <tr><td>label3</td><td>value3</td></tr><tr><td>label4</td><td>value4</td></tr>
  ...
</table>

所以结构保持不变，但 CSS 布局会注意将第二行放在右侧，因此用户会在一行中看到 2 列（字段，值）。

有什么提示吗？

更新：

这个技巧可以做到，但会破坏表格布局，因此不可用。

TABLE TR
{
    float:left;
}
TABLE TR:nth-child(2n+1)
{
    float:left;
    clear:both;
}

Answer 1

试一试，让知道是你想要的吗？

你的 HTML

<table>
  <tr><td>label1</td><td>value1</td></tr>
  <tr><td>label2</td><td>value2</td></tr>
  <tr><td>label3</td><td>value3</td></tr>
  <tr><td>label4</td><td>value4</td></tr>
  <!-- more stuff here -->
</table>

CSS：

tr {
  float: left;
}

tr:nth-child(2n+1) {
  clear: left;
  padding-right: 10px; /* You can edit this line and add as per your style */
}

在 Chrome、Safari、Firefox 中运行良好。没有在 IE 中检查

例子