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

时间:2013-11-07 22:21:41

标签: html html5 html-table

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元素。如果你查看我的示例链接,我有两个表,一个有两个tds,colspan = 2,最后有四个实际tds。在第一个中,td元素只是模仿4个tds,它们自己的colspan = 2,因此我假设表格无法准确知道单个colspan的大小,因为没有。如果不知道单个colspan上的确切内容,表格似乎不知道该怎么做。

如果我无法更改表格中的td元素数量,是否可以获得相同的效果?我宁愿不使用CSS指定宽度,并指定宽度WILL工作(测试),但我想看看是否还有其他方法。

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

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

如果您的表在逻辑上只有三列,那么就这样做。不使用colspan尝试使某些列更宽,而是使用CSS来设置宽度。 colspan=2属性意味着单元格跨越两列。并且您无法有效地跨越不存在的列。