这几天做项目,需要做表格,将第一列固定不动,其他的超出的内容可以滚动,网上查了很多办法,刚开始写的是第一列一个表格,其他内容一个表格。给其他内容设置滚动条。(内容随着后台一直添加,长短不一)
遇到的问题:
1、每行的内容不一样,让每个td的宽度不一样,出来的表格看起来很乱。
解决办法:给table设置 display:flex, tr td { flex: 1}。
随之而来的问题:多出的内容不显示,那就设置它 自动换行 中文换行是 white-space:pre-wrap;
2、由上面的方法出现的问题:第一列的高度没有内容撑高,高度不一致。
3、网上查了一个方法,接下来用了两个一摸一样的表格,把一个绝对定位到另一个的上面,把除了第一列的其他内容隐藏,用了visibility:hidden,给第二个表格设置滚动,可是因为visibility:hidden占位置,第一个表格盖住了第二个,不能拖动,用display:hidden不占位置,但是内容就又撑不高了。
解决办法:
1、第一个表格绝对定位到第二个表格上,但是外面嵌套的盒子宽度设为第一列的宽度。
2、给第二个表格设置滚动条就可以。
<style&