我有一个可滚动的基本表.这样做我必须设置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强制我们想要的尺寸!