如何在HTML表格的Days行下方正确显示“/”和“Time”

问题原因 #

现有代码错误地给周一到周六的所有表头都加上了rowspan="3"属性，这些表头会占用后续2行的垂直空间，导致你插入的/、Time单元格没有对应列位可以容纳，最终布局错乱。

正确实现 #

根据你的需求，这里提供两种符合场景的实现方案：

• 方案1：第一列上下依次显示Days、/、Time，其余列每列合并3行显示对应星期

<table border="2">
    <tr>
        <th>Days</th>
        <th rowspan="3">Monday</th>
        <th rowspan="3">Tuesday</th>
        <th rowspan="3">Wednesday</th>
        <th rowspan="3">Thursday</th>
        <th rowspan="3">Friday</th>
        <th rowspan="3">Saturday</th>
    </tr>
    <tr>
        <th>/</th>
    </tr>
    <tr>
        <th>Time</th>
    </tr>
</table>

• 方案2：第一列合并3行显示Days，其余列三行依次显示星期、/、Time

<table border="2">
    <tr>
        <th rowspan="3">Days</th>
        <th>Monday</th>
        <th>Tuesday</th>
        <th>Wednesday</th>
        <th>Thursday</th>
        <th>Friday</th>
        <th>Saturday</th>
    </tr>
    <tr>
        <th>/</th>
        <th>/</th>
        <th>/</th>
        <th>/</th>
        <th>/</th>
        <th>/</th>
    </tr>
    <tr>
        <th>Time</th>
        <th>Time</th>
        <th>Time</th>
        <th>Time</th>
        <th>Time</th>
        <th>Time</th>
    </tr>
</table>

内容的提问来源于stack exchange，提问作者user14273848