Html Rowspan未按预期工作_Html_Css_Html Table

Html Rowspan未按预期工作

html css

Html Rowspan未按预期工作,html,css,html-table,Html,Css,Html Table,我正在尝试创建一个表格布局，如下图所示：下面是我的Html代码： <html> <head> <meta charset="UTF-8" /> <title>Table sketch</title> <style> table { table-layout: fixed; width: 20em; }

我正在尝试创建一个表格布局，如下图所示：

下面是我的Html代码：

<html>
<head>
    <meta charset="UTF-8" />
    <title>Table sketch</title>
    <style>
        table {
            table-layout: fixed;
            width: 20em;
        }
        td {
            width: 4em;
            height: 1.5em;
            text-align: center;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <td colspan="4">&nbsp;1&nbsp;</td>
        </tr>
        <tr>
            <td rowspan="2">&nbsp;2&nbsp;</td>
            <td rowspan="2">&nbsp;3&nbsp;</td>
        </tr>
        <tr>
            <td colspan="2">&nbsp;4&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;5&nbsp;</td><td>&nbsp;6&nbsp;</td>
        </tr>
        <tr>
            <td colspan="4">&nbsp;7&nbsp;</td>
        </tr>
    </table>
</body>


表格草图
桌子{
表布局：固定；
宽度：20em；
}
运输署{
宽度：4em；
高度：1.5em；
文本对齐：居中；
}
1.
2.
3.
4.
5  6 
7.

但它会生成以下布局：

当我将第二行的rowspan值从2更改为3时。它给了我正确的布局

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


2.
3.

这里有一个到jsbin的链接

但为什么第一个html代码不起作用？非常感谢您的帮助

谢谢。

您有一个

tr

标记太多：第二行必须包含3个元素（即该行的第三个元素没有单独的

tr

）：

表格{
表布局：固定；
宽度：20em；
}
运输署{
宽度：4em；
高度：1.5em；
文本对齐：居中；
}


1.
2.
3.
4.
5  6 
7.