为什么我的 HTML 表格元素大小不正确？

Question

我正在开发 Wordle 的一个版本，它可以让你平衡化学方程式，对于底部的键盘，我正在使用一张桌子。然而，表中的每个元素都有不同的大小，即使在 CSS 中我已将宽度设置为特定值。我认为这是因为某些框上的文本较大，所以我尝试减小文本的大小，看看这是否会产生影响，但事实并非如此。我不完全确定从这里该去哪里。我也尝试过更改填充值和边距，但似乎没有任何效果。我得到的唯一进展是当我将字体大小设置为 1 像素时，除了最后的字体之外，它们的大小都是相同的。这是表格和 CSS 样式的代码。

注意：我实际上不确定

filler

类是否是必要的，但是当我尝试偏移第二行时，我尝试使用不同的宽度，然后将其保留。

.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;
  text-align: center;
  font-family: light-stories;
  font-size: 22px;
}

.filler {
  width: 25px;
  height: 25px;
}

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

Answer 1

因为您有 1 列班次，并且填充的单元格全部跨越 2 列，所以您引入了与单元格内容相关的灵活性。如果您要标准化单元格内容，您会看到除最后一个单元格之外的所有单元格大小相同，但您可以在水平移动中看到它们不以列之间的分割为中心。这就是为什么最后一个填充的单元格很短。

这就是自动调整大小的表格的本质。我建议您切换到 CSS grid 布局，以便您拥有更多控制权。如果可访问性是一个问题，您可以使用 ARIA 功能。

.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;
  text-align: center;
  font-family: light-stories;
  font-size: 22px;
}

.filler {
  width: 25px;
  height: 25px;
}

<table class="answer">
  <tr>
    <td class="option" colspan="2">NH<sub>4</sub><sup>+</sup></td>
    <td class="option" colspan="2">NH<sub>4</sub><sup>+</sup></td>
    <td class="option" colspan="2">NH<sub>4</sub><sup>+</sup></td>
    <td class="option" colspan="2">NH<sub>4</sub><sup>+</sup></td>
    <td class="option" colspan="2">NH<sub>4</sub><sup>+</sup></td>
    <td class="option" colspan="2">NH<sub>4</sub><sup>+</sup></td>
    <td class="option" colspan="2">NH<sub>4</sub><sup>+</sup></td>
    <td class="option" colspan="2">NH<sub>4</sub><sup>+</sup></td>
    <td class="option" colspan="2">NH<sub>4</sub><sup>+</sup></td>
  </tr>
  <tr>
    <td class="filler"></td>
    <td class="option" colspan="2">NH<sub>4</sub><sup>+</sup></td>
    <td class="option" colspan="2">NH<sub>4</sub><sup>+</sup></td>
    <td class="option" colspan="2">NH<sub>4</sub><sup>+</sup></td>
    <td class="option" colspan="2">NH<sub>4</sub><sup>+</sup></td>
    <td class="option" colspan="2">NH<sub>4</sub><sup>+</sup></td>
    <td class="option" colspan="2">NH<sub>4</sub><sup>+</sup></td>
    <td class="option" colspan="2">NH<sub>4</sub><sup>+</sup></td>
    <td class="option" colspan="2">NH<sub>4</sub><sup>+</sup></td>
    <td class="filler"></td>
  </tr>
</table>