网页table中tr合并,然后thead tbody固定,tbody滚动 ,请问这个能实现吗?

1.想要实现表格的thead tbody部分固定切tbody部分鈳滚动就需要将thead tbody与tbody进行分离,具体做法是

  2.设置th与td的宽度强制使其填充整个table的宽度。

以下方法的实现重点是将表单元素转换成行内块(由此tbody可实现超出滚动)并将单元格赋予固定值,可实现单元格内容超出以省略号显示这样的实际需求决定了此种情況下的table不再是根据内容而响应的。

在设置td的宽度时有时总和要比100%小些才不会导致一行放不下,应该是因为滚动条有一定的宽度通常情況下,不是每一个td都需要设置宽度的只给需要超出以省略号显示的td一个固定宽度即可,剩余的会自动分配其余空间

优化2:配合修改浏覽器的默认滚动条的css代码,可以使table更美观

补充1:当给tr一个background图片时在低版本google浏览器中,出现了每个td都继承了tr的背景样式的bug目前没找到比較简单合适的解决方法,通过本文的例子可以比较快速的解决该问题虽然本质上table已经不具有table属性了。

补充2:该方案仅用于纯手写table表格时当使用一些ui框架比如elementUI的时候,基本直接都封装好了

<td>每当我遇到自己不敢直视的困难时,我就会闭上双眼想象自己是一个80岁的老人,為人生中曾放弃和逃避过的无数困难而懊悔不已我会对自己说,能再年轻一次该有多好然后我睁开眼睛:砰!我又年轻一次了!</td>

我要回帖

更多关于 thead tbody 的文章

 

随机推荐