表格表头与列内容错位求助：设置display:table-header-group无效

问题根源 #

你的表格表头和内容列数不匹配，直接导致对齐混乱：

• 表头总列数：1个「Months」列 + 10个月份×2（每个月份colspan=2）= 21列
• 而tbody里每一行只有11个<td>，列数严重不足，浏览器只能自动调整布局，最终造成内容堆叠。

修复步骤 #

1. 补全tbody列数：确保每个<tr>的<td>数量和表头总列数一致（21列），缺失的单元格用空<td>填充。
2. 清理冗余样式：thead的display: table-header-group是浏览器默认属性，无需手动设置；thead的边框样式可按需保留，不影响对齐逻辑。

修正后的代码 #

CSS（保留核心样式，优化可读性）

table {
  border-collapse: collapse;
  margin: 25px;
  font-size: 0.9em;
  border-radius: 5px 5px 0 0;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
  background-color: bisque;
  table-layout: fixed; /* 固定列宽逻辑，避免内容拉伸偏移 */
}

thead tr {
  background-color: #009879;
  color: white;
  font-weight: bold;
  text-align: left;
}

tbody tr:nth-of-type(even) {
  background-color: whitesmoke;
}

/* 可选：给单元格加边框，直观验证对齐效果 */
th, td {
  border: 1px solid #ddd;
  padding: 8px;
}

HTML（补全列数后的tbody）

<table>
    <thead>
      <tr>
        <th id="monthName">Months</th>
        <th class="header" colspan="2">June</th>
        <th class="header" colspan="2">July</th>
        <th class="header" colspan="2">August</th>
        <th class="header" colspan="2">September</th>
        <th class="header" colspan="2">October</th>
        <th class="header" colspan="2">February</th>
        <th class="header" colspan="2">March</th>
        <th class="header" colspan="2">April</th>
        <th class="header" colspan="2">January</th>
        <th class="header" colspan="2">May</th>
      </tr>
    </thead>
    <tbody>
        <tr>
          <td class="question">x</td>
          <td class="answer">95</td>
          <td class="answer">73</td>
          <td class="answer">73</td>
          <td class="answer">56</td>
          <td class="answer">63</td>
          <td class="answer">68</td>
          <td class="answer">80</td>
          <td class="answer">86</td>
          <td class="answer"></td>
          <td class="answer"></td>
          <!-- 补全剩余10个空单元格 -->
          <td class="answer"></td>
          <td class="answer"></td>
          <td class="answer"></td>
          <td class="answer"></td>
          <td class="answer"></td>
          <td class="answer"></td>
          <td class="answer"></td>
          <td class="answer"></td>
          <td class="answer"></td>
          <td class="answer"></td>
        </tr>
        <tr>
          <td class="question">y</td>
          <td class="answer">68</td>
          <td class="answer">85</td>
          <td class="answer">64</td>
          <td class="answer">56</td>
          <td class="answer">96</td>
          <td class="answer">100</td>
          <td class="answer"></td>
          <td class="answer"></td>
          <td class="answer">89</td>
          <td class="answer">79</td>
          <!-- 补全剩余10个空单元格 -->
          <td class="answer"></td>
          <td class="answer"></td>
          <td class="answer"></td>
          <td class="answer"></td>
          <td class="answer"></td>
          <td class="answer"></td>
          <td class="answer"></td>
          <td class="answer"></td>
          <td class="answer"></td>
          <td class="answer"></td>
        </tr>
        <tr>
          <td class="question">z</td>
          <td class="answer">61</td>
          <td class="answer">59</td>
          <td class="answer">86</td>
          <td class="answer">44</td>
          <td class="answer">86</td>
          <td class="answer">65</td>
          <td class="answer"></td>
          <td class="answer">73</td>
          <td class="answer">51</td>
          <td class="answer">92</td>
          <!-- 补全剩余10个空单元格 -->
          <td class="answer"></td>
          <td class="answer"></td>
          <td class="answer"></td>
          <td class="answer"></td>
          <td class="answer"></td>
          <td class="answer"></td>
          <td class="answer"></td>
          <td class="answer"></td>
          <td class="answer"></td>
          <td class="answer"></td>
        </tr>
    </tbody>
  </table>

额外优化建议 #

• 可以给第一个「Months」列设置固定宽度（比如width: 80px），让整体布局更均衡；
• 如果空单元格不需要显示边框，可给空<td>加专属类名，通过CSS隐藏边框。

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