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

Posted 2023-03-29

【中文标题】表中奇数列的偶数个 td 元素

【英文标题】：Even number of td elements in table with odd number of columns

【发布时间】：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

有什么想法吗？

【问题讨论】：

你能分享一些代码吗？

嗯当然，但是这个问题真的不需要。

代码比想象更能说明问题。

我刚刚阅读了你关于“在我的情况下”的最后一段，这就是我要求它的原因:)

已更新。了解我想要实现的目标。

【参考方案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  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>