Question

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

以下是我的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>

但它会在布局下生成：

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

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

这是link到jsbin。

但为什么第一个HTML代码不起作用？非常感谢任何帮助。

感谢。

Answer 1

你有一个tr标签：第二行必须包含3个元素（即该行中第三个元素没有单独的tr）：

table {
            table-layout: fixed;
            width: 20em;
        }
        td {
            width: 4em;
            height: 1.5em;
            text-align: center;
        }

<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>
            <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>

Rowspan没有按预期工作

1 个答案: