行不正确的 Colspan 无法正确呈现

Question

http://jsfiddle.net/9p7Mx/1/

我确定以前有人问过这个问题，但我找不到正确的搜索词：

如果您有一个 HTML 表格，例如：

<table>
<tr>
    <td colspan="2">&nbsp;</td>
    <td colspan="2">&nbsp;</td>
</tr>
<tr>
    <td colspan="2">&nbsp;</td>
    <td colspan="2">&nbsp;</td>
</tr>
<tr>
    <td colspan="2">&nbsp;</td>
    <td colspan="2">&nbsp;</td>
</tr>
<tr>
    <td colspan="3">&nbsp;</td>
    <td>&nbsp;</td>
</tr>
</table>

最后一行的 colspan=3 实际上不会正确排列，因为您实际上没有 4 个 td 元素。如果您查看我的示例链接，我有两张表，一张有两个 td，colspan=2，最后一张有四个实际的 td。首先，td 元素只是用自己的 colspan=2 模拟 4 个 td，因此我假设该表无法确切知道单个 colspan 有多大，因为没有。在不知道单个 colspan 的确切值的情况下，该表似乎不知道该怎么做。

如果我不能改变表格中 td 元素的数量，是否可以得到同样的效果？我宁愿不使用 CSS 分配宽度，并且分配宽度会起作用（经过测试），但我想看看是否有其他方法。

Answer 1

该标记违反了 HTML 表格模型，因为http://validator.w3.org 告诉您是否在 HTML5 模式下使用它（“由元素 td 建立的表格第 2 列没有以它开头的单元格。”）。所以你应该期待不一致和意外的渲染。

如果您的表格在逻辑上只有三列，那就这样吧。与其尝试使用colspan 使某些列更宽，不如使用CSS 设置宽度。 colspan=2 属性意味着单元格跨越两列。而且你不能有效地跨越一个不存在的列。

Answer 2

使用类并为所需的 X% 设置宽度。
您必须考虑一些 div 而不是表格。