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 中检查

例子