使用HTML/CSS/JS还原课程表：7:00-8:00时段单元格对齐问题求助

问题描述 #

我需要用HTML、CSS和JavaScript还原课程表，目前已编写部分代码，但遇到问题：7:00-8:00时段的空白单元格无法与周二、周三、周四、周五列的单元格对齐，请求技术帮助。

现有代码 #

CSS代码 #

th {
  border: none;
  color: black; /* 文字颜色 */
  padding: 8px;
  text-align: center;
}

.cell1 {
  background-color: #006400; /* 绿色 */
}

.cell1wd1 {
  height: 2px;
  width: 20px;
  padding: 2px 4px; /* 调整上下内边距 */
  font-size: 10px; /* 按需调整字号 */
  white-space: nowrap; /* 禁止文字换行 */
}

.cell2 {
  background-color: #ffbec8; /* 粉色 */
}

.cell3 {
  background-color: #808080; /* 灰色 */
}

HTML代码 #

<table cellspacing="1">
    <thead>
        <tr>
            <th>Time</th>
            <th class="cell1">Monday</th>
            <th class="cell2">Tuesday</th>
            <th class="cell3">Wednesday</th>
            <th class="cell1">Thursday</th>
            <th class="cell2">Friday</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>7:00 - 8:00</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>8:00 - 9:00</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>9:00 - 10:00</td>
            <td class="cell1">CMSC 132</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

问题原因及解决方法 #

单元格错位的核心原因是未给表格设置统一布局规则，且<th>与<td>的内边距、高度不一致。以下是修正方案：

修正后的CSS代码 #

/* 统一表格布局规则，避免列宽行高混乱 */
table {
  border-collapse: collapse; /* 合并边框，替代原cellspacing属性 */
  width: 100%; /* 可选：让表格占满容器宽度 */
  table-layout: fixed; /* 固定列宽，不受单元格内容（含空白）影响 */
}

/* 统一表头和数据单元格的基础样式 */
th, td {
  border: 1px solid #ddd; /* 添加边框便于查看对齐状态 */
  color: black;
  padding: 8px;
  text-align: center;
  height: 40px; /* 统一单元格高度，确保行对齐 */
}

.cell1 {
  background-color: #006400; /* 绿色 */
  color: white; /* 文字设为白色提升可读性 */
}

.cell2 {
  background-color: #ffbec8; /* 粉色 */
}

.cell3 {
  background-color: #808080; /* 灰色 */
  color: white; /* 文字设为白色提升可读性 */
}

/* 时间列单独调整样式 */
td:first-child {
  text-align: left;
  background-color: #f5f5f5;
}

修正后的HTML代码 #

<table>
    <thead>
        <tr>
            <th>Time</th>
            <th class="cell1">Monday</th>
            <th class="cell2">Tuesday</th>
            <th class="cell3">Wednesday</th>
            <th class="cell1">Thursday</th>
            <th class="cell2">Friday</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>7:00 - 8:00</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>8:00 - 9:00</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>9:00 - 10:00</td>
            <td class="cell1">CMSC 132</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

关键调整说明 #

1. table-layout: fixed：强制列宽固定，不会因单元格空白或内容变化改变列宽，从根源解决列对齐问题。
2. 统一th和td的padding与height：让表头和数据单元格的内边距、高度完全一致，避免行高差异导致的错位。
3. border-collapse: collapse：替代原HTML的cellspacing属性，合并边框让布局更规整，同时消除间距带来的对齐误差。

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