html - HTML表格行跨度奇怪的行为

Question

我有以下html代码：

<table border="1">
    <tbody>
        <tr>
            <td rowspan="4">1 Rowspan=4</td>
            <td rowspan="3">2 Rowspan=3</td>
        </tr>
        <tr>
            <td>3 something</td>
        </tr>
        <tr>
            <td>4 something</td>
        </tr>
        <tr>
            <td>5 something</td>
        </tr>
        <tr>
            <td>6 something</td>
            <td>7 something</td>
        </tr>
        <tr>
            <td>8 something</td>
            <td>9 something</td>
        </tr>
    </tbody>
</table>

它的行为如下：

这是错误的！应该只有 2 列！

我希望 #3 低于 #2 和 #4 低于 #1。

为什么这不可能？

这是一个小提琴：http: //jsfiddle.net/FvY5b/

Answer 1

该标记违反了 HTML 表格模型。如果在 HTML5 模式下使用http://validator.w3.org检查标记，则会报告错误：“表格行为 3 列宽，超出了第一行建立的列数 (2)。”

因此，正如@Aditi 的回答和 Madara Uchiha 的评论中所建议的那样，在 CSS 中更改rowspan="4"并rowspan="2"删除rowspan="3"并设置第一行的高度（因为明显的意图是使其高于其他情况）。

Answer 2

在前两行试试这个......

<tr>
        <td rowspan="2">1 Rowspan=4</td>
        <td>2 Rowspan=3</td>
</tr>
<tr>
            <td>4 something</td>
        </tr>
        <tr>
            <td>3 something</td>
        </tr>