固定表格第一列的宽度

Question

我有一个带有可滚动主体的基本表格。为了做到这一点，我不得不设置thead和tbody的display:block，还设置了th和td的宽度。

由于某种原因，第一列的th与第一列的td不对齐。有人能告诉我是什么原因吗？

CSS

 thead,
 tbody {
  display: block;
 }

 thead {
  text-align: left;
 }

 tbody {
  background: yellow;
  overflow-y: auto;
  height: 6em;
 }

 thead th,
 tbody td {
  width: 4em;
  padding: 2px;
 }

 thead tr th:first-child,
 tbody tr td:first-child {
  width: 8em;
  background: salmon;
  font-weight: normal;
 }

这里是Fiddle

- agri

---

你是指当内容更多时，第一个 th 的尺寸比第一个 td 的右侧更大吗？ - demonofthemist

我想让第一个th和第一个td保持相同的宽度，无论内容是什么。 - agri

请检查下面的答案 - demonofthemist

Answer 1

DIV 和 TABLE 的宽度属性有所不同。

使用 max-width 和 min-width 可以实现您想要的结果：

thead tr th:first-child,
tbody tr td:first-child {
  width: 8em;
  min-width: 8em;
  max-width: 8em;
  word-break: break-all;
}

编辑：

（编辑回答以澄清HTML中宽度的工作方式，请指出我是否有任何错误或遗漏！）

在div中，width属性用于定义元素的大小，内容会相应地适应其大小，而不管父元素和兄弟元素的宽度。

但是在表格中，元素的大小是根据内容计算的，并且width属性的优先级较低。甚至还要考虑兄弟元素的大小。因此，我们必须使用其他属性，例如min-width和max-width来强制使用所需的大小！

- demonofthemist

---

我已经测试了设置最大宽度，但是它并没有改变任何东西。 - agri

更新了我的回答，忘记提到min-width属性，当内容不超过8em的宽度时是必需的！ - demonofthemist