Question

我有一个带可滚动主体的基本表。这样做我必须设置thead和tbody display：block并且我还设置了th和td的宽度。

由于某种原因，第一列不与第一列tds对齐。谁能告诉我是什么原因造成的？

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

Answer 1

DIV＆amp;的宽度prpoerty TABLE的作品不同。

使用max-width＆amp; 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属性中用于定义元素的大小＆amp;无论父母与否，内容都是相应的。兄弟宽度。

但是在表的情况下，元素的大小根据内容计算，＆amp; width属性的优先级较低。甚至考虑兄弟姐妹的大小。因此，我们必须使用其他属性，例如min-width＆amp; max-width迫使我们想要的尺寸！

Answer 2

删除你的第一个样式规则：display：block from tbody and thead

通过执行此操作，您将覆盖显示的表格格式和布局：表格提供

thead,
tbody {
 // display: block;
}

Fixed

表格第一列的固定宽度

2 个答案: