为何我的HTML表格元素尺寸无法统一？

问题描述 #

开发类似Wordle的化学方程式配平游戏，用HTML table做底部操作键盘，已在CSS中给<td>设置固定宽高，但表格内元素尺寸仍不统一。试过缩小字体、调整内边距外边距都无效，只有把字体设为1px时，除首尾元素外其余尺寸才统一。代码里的filler类是当初为偏移第二行添加的，不确定是否必要。

原因分析 #

1. colspan干扰列宽计算：每个.option都加了colspan="2"，但表格无对应基础列，导致浏览器自动计算列宽时混乱，固定宽高被内容撑开。
2. 盒模型未统一：默认盒模型下，width/height不包含边框和内边距，设置的25px会额外加上边框、内边距，实际尺寸超出预期。
3. 内容宽度差异：sub/sup标签和不同长度的化学式文本，会强制撑开单元格，忽略固定宽高设置。

解决步骤 #

• 移除所有.option的colspan="2"，让每个单元格对应表格一列，避免列宽计算混乱。
• 给.option添加box-sizing: border-box，确保宽高包含边框和内边距。
• 加white-space: nowrap强制文本不换行，防止内容换行撑高单元格。
• 给.option设置min-width和max-width，锁定宽度范围，彻底避免被内容撑开。
• 若要偏移第二行，filler可保留，但需和.option用相同盒模型设置；也可改用容器padding/flex布局调整位置，更语义化。

修改后的代码 #

CSS

.answer {
  border-collapse: separate;
  border-spacing: 15px;
  border: 5px solid rgb(105, 105, 105);
  margin: auto;
  margin-top: 50px;
}

.option {
  border: 3px solid black;
  padding: 10px;
  width: 25px;
  height: 25px;
  min-width: 25px;
  max-width: 25px;
  text-align: center;
  font-family: light-stories;
  font-size: 22px;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden; /* 可选：超出部分隐藏，防止超长内容撑开 */
}

.filler {
  width: 25px;
  height: 25px;
  box-sizing: border-box;
}

HTML

<table class="answer">
  <tr>
    <td class="option">NH<sub>4</sub><sup>+</sup></td>
    <td class="option">CN<sup>-</sup></td>
    <td class="option">OH<sup>-</sup></td>
    <td class="option">ClO<sub>3</sub><sup>-</sup></td>
    <td class="option">ClO<sub>2</sub><sup>-</sup></td>
    <td class="option">ClO<sup>-</sup></td>
    <td class="option">NO<sub>3</sub><sup>-</sup></td>
    <td class="option">SO<sub>4</sub><sup>2-</sup></td>
    <td class="option">CO<sub>3</sub><sup>2-</sup></td>
  </tr>
  <tr>
    <td class="filler"></td>
    <td class="option">HCO<sub>3</sub><sup>-</sup></td>
    <td class="option">PO<sub>4</sub><sup>3-</sup></td>
    <td class="option">SO<sub>3</sub><sup>2-</sup></td>
    <td class="option">NO<sub>2</sub><sup>-</sup></td>
    <td class="option">MnO<sub>4</sub><sup>2-</sup></td>
    <td class="option">PO<sub>3</sub><sup>3-</sup></td>
    <td class="option">C<sub>2</sub>H<sub>3</sub>O<sub>2</sub><sup>-</sup></td>
    <td class="option">C<sub>2</sub>O<sub>4</sub><sup>2-</sup></td>
    <td class="filler"></td>
  </tr>
</table>

额外说明 #

• 确保light-stories字体已正确引入，若加载失败浏览器会用默认字体替代，可能导致尺寸变化。
• 第二行偏移若觉得filler麻烦，可将表格放在容器中，用容器padding或flex布局调整位置，语义化更好。

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