table 中奇数列的偶数个 td 元素

Question

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

根据 tables 上的 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.

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

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

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

<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;
}

Answer 2

没有 css 嵌套表格

<table border="1">
     <tr>
        <td> 
          <table border="1">
            <tr>
             <td>Content</td>
             <td>Content</td>
             <td>Content</td>       
           </tr>    
         </table>
      </td>              
    </tr>
    <tr>
        <td>
            <table width="100%" border="1">
               <tr>
                 <td align="center">Content</td>
                 <td align="center">Content</td>              
              </tr>   
            </table>
        </td>       
    </tr>
</table>

Answer 3

如果您不想使用 CSS，这个本机技巧可能会对您有所帮助。 CSS Flexbox 可能无法在所有浏览器上运行。

Formula
TotalColSpan = LowerBox * UpperBox;
Upper row colspan = TotalColSpan / LowerBox;
Lower row colspan = TotalColSpan / UpperBox;

<table border="1">
    <tr>
        <td colspan="2">Content</td>
        <td colspan="2">Content</td>
        <td colspan="2">Content</td>       
    </tr>
    <tr>
        <td colspan="3">Content</td>
        <td colspan="3">Content</td>
    </tr>
</table>

编辑 1：

这个是如何工作的？ Demo

我们使用了 tables colspan 属性，colspan 属性定义单元格应跨越的列数。

当我们写colspan="2"时，这意味着实际上有两个单元格，但它们被合并了。这里我们写了 3 colspan="2"，这意味着我们实际上有 6 table 个单元格。在下一行中，我们可以拆分这 6 Table 个单元格。我们在第二行使用了 colspan="3"，这意味着它需要 3 个单元格并合并。

<table border="1">
    <tr>
        <td>Content</td>
        <td>Content</td>     
        <td>Content</td>     
        <td>Content</td>     
        <td>Content</td>     
        <td>Content</td>     
    </tr>
    <tr>
        <td colspan="2">Content</td>
        <td colspan="2">Content</td>
        <td colspan="2">Content</td>           
    </tr>
    <tr>
        <td colspan="3">Content</td>
        <td colspan="3">Content</td>
    </tr>
</table>

table 中奇数列的偶数个 td 元素

Even number of td elements in table with odd number of columns

html

css

html-table

center

offset