如何用纯CSS固定thead实现表格滚动

html-css010

如何用纯CSS固定thead实现表格滚动,第1张

2个table. 一个仅显示 table head部分, 另外一个仅显示 body部分. body部分的表, 设置 overflow:auto 即可. 难点: 2个table的 header 保持宽度一致, 以及左右滚动时保持一致. jquery 做个宽度自动匹配. 尝试下吧, 我想做的, 后来需求停掉就没实

内嵌标签: thead (可选)、 tbody (可选)、td、tr、colgroup 、 caption (可选)

属性:align ,bgcolor ,bordercolor,border ,cellpadding ,cellspacing ,frame ,width ,summary ,rules 。

现在的table的属性基本已经过时,都使用css进行设置table样式。

1.border-collapsecollapse | separate

collapse : border线合并

separate: border线分隔,默认属性

ps: 使用collapse 此属性时, border-spacing 、empty-cells和 border-radius 失效 ,无任何效果。

2.border-spacinghorizontal <length >| vertical <length >

3.vertical-align 设置内容与图片位置

4.table-layout auto | fixed

ps: auto 表格布局自适应宽度

fixed 表格布局固定宽度,文字内容等可能会溢出

5.caption-side 针对于caption标签的css样式设置

6.empty-cells 但单元格内无内容时候,可设置隐藏

参考:

https://www.sitepoint.com/community/t/table-format-using-css-border-issue/36882/3

https://css-tricks.com/almanac/properties/b/border-collapse/

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Table

你是.hd-info 这个定义的长度是990还是table的width是990啊?如果是前者,说明你定义的其他样式被冲掉了,需要自己查去;如果是后者的话,就是你的.he-info这个样式有问题了,因为你的width=1000