Question

我正在尝试构建一个这样的表：

这是我的解决方案：

<html>
    <head>
    </head>
    <body>
        <table border="1px">
            <tr>
                <td rowspan="6"></td>
                <td rowspan="3"></td>
                <td rowspan="2"></td>
            </tr>

            <tr><td rowspan="3"></td><td rowspan="2"></td></tr>
            <tr><td rowspan="2"></td></tr>
        </table>
    </body>
</html>

这似乎是合乎逻辑的，但它不适用于任何浏览器。 HTML中有什么方法可以构建这样的表吗？

Answer 1

请改为尝试：

<table style="border: 1px solid #999">
    <tr>
        <td rowspan="4">&nbsp;</td>
        <td rowspan="2">&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td rowspan="2">&nbsp;</td>
    </tr>
    <tr>
        <td rowspan="2">&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
    </tr>
</table>

<强> jsFiddle example

Answer 2

你只有3行，所以它永远不会起作用。当您使用rowspan="6"定义第一个单元格时，您至少需要6行。

您可以通过在图表中想象6行来布局单元格，然后您可以看到给定单元格的哪一行开始。下图以第一次遇到的顺序显示每个单元格;

因此以下代码将生成该布局;

<html>
    <head>
    </head>
    <body>
        <table border="1px">
            <tr>
                <td rowspan="6">&nbsp;</td> <!-- Box 1 -->
                <td rowspan="3">&nbsp;</td> <!-- Box 2 -->
                <td rowspan="2">&nbsp;</td> <!-- Box 3 -->
            </tr>
            <tr></tr>
            <tr><td rowspan="2">&nbsp;</td></tr> <!-- Box 4 -->
            <tr><td rowspan="3">&nbsp;</td></tr> <!-- Box 5 -->
            <tr><td rowspan="2">&nbsp;</td></tr> <!-- Box 6 -->
            <tr></tr>
        </table>
    </body>
</html>

 是如此，我可以看到结构。

希望这有帮助。

Answer 3

您可以坚持使用6/3/2 rowspan，但是您需要包含您正在跨越的空行。例如：

<table border="1px">
    <tr>
        <th rowspan="6">6</th>
        <td rowspan="3">3</td>
        <td rowspan="2">2</td>
    </tr>
    <tr><!-- empty row --></tr>
    <tr><td rowspan="2">2</td></tr>
    <tr><td rowspan="3">3</td></tr>
    <tr><td rowspan="2">2</td></tr>
    <tr><!-- empty row --></tr>
</table>

Fiddle riddle diddle

Html表，rowspan问题

3 个答案: