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

【问题标题】：Even number of td elements in table with odd number of columns表中奇数列的偶数个 td 元素
【发布时间】：2016-09-01 03:40:17
【问题描述】：

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

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

有什么想法吗？

【问题讨论】：

你能分享一些代码吗？
嗯当然，但是这个问题真的不需要。
代码比想象更能说明问题。
我刚刚阅读了你关于“在我的情况下”的最后一段，这就是我要求它的原因:)
已更新。了解我想要实现的目标。

标签： html css html-table center offset

【解决方案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;
}

【讨论】：

这适用于 Chrome，但不适用于 Firefox（不确定 Safari/IE）。
这是怎么做到的？你能解释一下吗？
@GHOST-34- 你确定它不能在 Firefox 上运行吗？因为它在我的最后工作。你用的是什么版本？
@DarrenSweeney 这样做没什么复杂的。我们只是改变了表格的显示类型。

【解决方案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>

【讨论】：

这对我有用，但男孩太丑了。但是，我的特殊情况并不像我发布的示例代码那么简单，因此对于遇到相同问题的任何人，请先尝试其他问题。这绝对是不得已而为之。

【解决方案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>

【讨论】：