Question

我觉得这是一个很好的问题，但我很难找到一个直接的答案或解决方案。

根据表格中的W3规范：

列数等于列数最多的行所需的列数，包括跨越多列的单元格。对于少于此列数的任何行，该行的末尾应填充空单元格。

这当然是明显的，也是有道理的，但我认为如果没有达到行宽，想要将特定行的内容居中是不合理的。

在我的情况下，我有一个3列宽的图标表，但有11个图标离开最后一行偏离中心。我一直在努力想出办法解决这个问题，但我能想到的只是做一些hacky或者为这些图标制作一个带有两列的新表。

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

<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嵌套表

＆＃13;

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

＆＃13;

Answer 3

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

公式
  TotalColSpan = LowerBox * UpperBox;
  上排colspan = TotalColSpan / LowerBox;
  下排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

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

当我们写colspan="2"时，这意味着实际上有两个单元格，但它们是合并的。这里我们写了3 colspan="2"，这意味着我们实际上有6个表格单元格。在下一行中，我们可以拆分这6个表格单元格。我们在第二行使用了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>

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

3 个答案: