html - 列数为奇数的表中的偶数个 td 元素

Question

我觉得这是涵盖面广的问题之一，但我很难找到直接的答案或解决方案。

根据表格的 W3 规范:

The number of columns is equal to the number of columns required by the row with the most columns, including cells that span multiple columns. For any row that has fewer than this number of columns, the end of that row should be padded with empty cells.

这当然是显而易见的并且是有道理的，但我认为如果特定行的内容没有达到行宽，则希望将其居中是不合理的。

在我的例子中，我有一个 3 列宽的图标表，但有 11 个图标使最后一行偏离中心。我一直在努力想出解决这个问题的方法，但我所能想到的就是做一些骇人听闻的事情，或者为这些图标制作一个包含两列的新表格。

一些示例代码来说明问题:

<table>
    <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>       
    </tr>
    <tr>
        <td>Content</td>
        <td>Content</td>
    </tr>
</table>

我想要什么

000 000 000
  000 000

我得到了什么

000 000 000
000 000

有什么想法吗？

Answer 1

您可以使用一些小技巧来解决这个问题。使用以下 CSS。 Demo

table {
  display:block;
  width: 100%;
}
table tbody {
  display:block;
  width: 100%;
}
table tr {
  display: table;
  width: 100%;
}
table tr td {
  width: 50%;
  text-align: center;
}