html – 表格第一列的固定宽度

发布时间：2020-12-14 18:42:54 所属栏目：资源来源：网络整理

导读：我有一个可滚动的基本表.这样做我必须设置thead和tbody display：block并且我还设置了th和td的宽度. 由于某种原因,第一列不与第一列tds对齐. 谁能告诉我是什么原因导致的？ CSS thead,tbody { display: block; } thead { text-align: left; } tbody { backgr

我有一个可滚动的基本表.这样做我必须设置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

解决方法

DIV& amp;宽度的宽度表格的工作方式不同.

使用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强制我们想要的尺寸！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!