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

前端之家收集整理的这篇文章主要介绍了html – 表格第一列的固定宽度前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个可滚动的基本表.这样做我必须设置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强制我们想要的尺寸!

原文链接:https://www.f2er.com/html/225465.html

猜你在找的HTML相关文章