Question

我一直在设计网页已有一段时间了，对于我的一个网页，我需要设计一个包含6列和3行的表格。第一列需要有3行，而其他5列只需要2行。我可以使用这个代码来实现它：

<tr><td class="style3">7:00 AM
                </td>
                <td class="style3" rowspan="2">
                </td>
                <td class="style3" rowspan="2">
                </td>
                <td class="style3" rowspan="2">
                </td>
                <td class="style3" rowspan="2">
                </td>
            </tr>
            <tr><td class="style3">7:30 AM
                </td>
            </tr>
            <tr><td class="style3">7:59 AM
                </td>
                <td class="style3">
                </td>
                <td class="style3">
                </td>
                <td class="style3">
                </td>
                <td class="style3">
                </td>
            </tr>

如何才能使第5列第一行的底部边框完全位于第一行第二行的中间柱

这意味着 5列第一行的下边框线位于第一列第二列“7:30 AM”的中间位置即可。我知道这很令人困惑，但我无法向您展示我希望它看起来像的样子，因为我只是加入这里而且我没有10个声誉来发布图像。请理解我的逻辑。

Answer 1

rowspan=2表示该列将跨越两行，因此如果要将其应用于第一行的第一列，则下一行应该少一列。对于您执行rowspan="n"的每个列，您需要在下一个＆＃34; n-1＆＃34;中省略该列。行数。

以下代码段将向您说明：

＆＃13;

table, td { 
    border: 1px solid gray;
    border-collapse: collapse;
}
td { padding: 8px; }

＆＃13;

<table>
    <tbody>
        <tr>
            <td class="style3">7:00 AM</td>
            <td class="style3" rowspan="2">Event 1</td>
            <td class="style3" rowspan="2">Event 2</td>
            <td class="style3" rowspan="2">Event 3</td>
            <td class="style3" rowspan="2">Event 4</td>
        </tr>
        <tr>
            <td class="style3" rowspan="2"></td>
        </tr>
        <tr>
            <td class="style3" rowspan="2">Event 5</td>
            <td class="style3" rowspan="2">Event 6</td>
            <td class="style3" rowspan="2">Event 7</td>
            <td class="style3" rowspan="2">Event 8</td>
        </tr>
        <tr>
            <td class="style3">7:59 AM</td>
        </tr>
    </tbody>
</table>

＆＃13;

如何设计具有不同行数的HTML表？

1 个答案: