table的td、th的一些样式问题(宽度,边框,滚动条,多行多列的表头thead固 ...

2023年6月20日发(作者：)

table的td、th的⼀些样式问题（宽度，边框，滚动条，多⾏多列的表头thead固定）1. 给table加边框table{ border-collapse: collapse;

/*表格的边框合并为⼀个单⼀的边框*/}table, table tr th, table tr td {

border:1px solid #ccc;

}还有种傻傻的⽅法：table{ border-top:1px solid #ccc; border-left:1px solid #ccc;

}table tr td, table tr th{ border-right:1px solid #ccc; border-bottom: 1px solid #ccc;

}2.给table的th固定宽度① 设置table的宽度② table设置table-layout : fixed ;③ 设置th宽度

3.给table加滚动条在table外包⼀层div，div设置overflow属性div{ overflow-x: scroll;

} 4.给td加滚动条在td⾥加⼀层div，div宽度100%，且设置overflow属性 ⾥嵌套table，且table有滚动条　① 最外层的table加上宽度、table-layout:fixed;word-break:break-all;（防⽌内层的table内容过长，将外层td撑开） ②在td和第⼆层table之间，加⼀层div;div设置overflow属性，再给内层table的th设置宽度就⾏了，6.隐藏滚动条.classname :: -webkit-scrollbar{display:none;}7.如下图，th在左侧，右侧td，第⼀⾏的td设置了colspan=“8”，使⽤了colspan后，设置列宽(th/td的宽度)不⽣效： 解决办法：添加colgroup属性，col设置列的宽度。（若td设置了colspan,且colgroup设置了col的宽度，但ie下宽度仍不⽣效，记得：table加上样式table-layout : fixed ;） 8. 设置td的内容超出部分以省略号显⽰（title属性展⽰完整数据）table tr td { overflow: hidden; text-overflow:ellipsis; white-space: nowrap;}（若不⽣效，给 table 设置宽度和table-layout : fixed ;）超出两⾏，再以省略号显⽰（不兼容ie）：table table td{ overflow:hidden; text-overflow: ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-word; word-break:break-all;

} 9. 兼容问题：ie9下，表格出现空格以及错位。　 如图：第⼀⾏的操作⼈右移了，出现了空格。

解决办法： ⽹上查，这是ie9的⼀个bug， 与间有空⾏时会发⽣错位。所以，去除掉td标签内的空格。

10. tr之间出现空⽩⾏　

如图：我在⽤字符串拼接，⽣成表结构的时候，发现渲染出的表结构tr之间有空⾏　　var html ='名称内容名称内容';　　$('tbody').append(html); 　　　　检查发现：坑啊，结束标志写错了，写错成了，记录下来，不知道有没有⼈和我⼀起犯蠢。11. td 在ie浏览器⾥ 没有边框，⾕歌浏览器正常　　检查发现，td设置了相对定位position:relative,在ie下有兼容问题， 解决：设置background-clip属性（规定背景的绘制区域） ----->

table tr td { padding: 0px; height: 40px; position: relative; background-clip: padding-box;} 12. 多⾏多列的表头thead固定效果图：

图1：

图2：

2023年6月20日发(作者：)

table的td、th的⼀些样式问题（宽度，边框，滚动条，多⾏多列的表头thead固定）1. 给table加边框table{ border-collapse: collapse;

/*表格的边框合并为⼀个单⼀的边框*/}table, table tr th, table tr td {

border:1px solid #ccc;

}还有种傻傻的⽅法：table{ border-top:1px solid #ccc; border-left:1px solid #ccc;

}table tr td, table tr th{ border-right:1px solid #ccc; border-bottom: 1px solid #ccc;

}2.给table的th固定宽度① 设置table的宽度② table设置table-layout : fixed ;③ 设置th宽度

3.给table加滚动条在table外包⼀层div，div设置overflow属性div{ overflow-x: scroll;

} 4.给td加滚动条在td⾥加⼀层div，div宽度100%，且设置overflow属性 ⾥嵌套table，且table有滚动条　① 最外层的table加上宽度、table-layout:fixed;word-break:break-all;（防⽌内层的table内容过长，将外层td撑开） ②在td和第⼆层table之间，加⼀层div;div设置overflow属性，再给内层table的th设置宽度就⾏了，6.隐藏滚动条.classname :: -webkit-scrollbar{display:none;}7.如下图，th在左侧，右侧td，第⼀⾏的td设置了colspan=“8”，使⽤了colspan后，设置列宽(th/td的宽度)不⽣效： 解决办法：添加colgroup属性，col设置列的宽度。（若td设置了colspan,且colgroup设置了col的宽度，但ie下宽度仍不⽣效，记得：table加上样式table-layout : fixed ;） 8. 设置td的内容超出部分以省略号显⽰（title属性展⽰完整数据）table tr td { overflow: hidden; text-overflow:ellipsis; white-space: nowrap;}（若不⽣效，给 table 设置宽度和table-layout : fixed ;）超出两⾏，再以省略号显⽰（不兼容ie）：table table td{ overflow:hidden; text-overflow: ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-word; word-break:break-all;

} 9. 兼容问题：ie9下，表格出现空格以及错位。　 如图：第⼀⾏的操作⼈右移了，出现了空格。

解决办法： ⽹上查，这是ie9的⼀个bug， 与间有空⾏时会发⽣错位。所以，去除掉td标签内的空格。

10. tr之间出现空⽩⾏　

如图：我在⽤字符串拼接，⽣成表结构的时候，发现渲染出的表结构tr之间有空⾏　　var html ='名称内容名称内容';　　$('tbody').append(html); 　　　　检查发现：坑啊，结束标志写错了，写错成了，记录下来，不知道有没有⼈和我⼀起犯蠢。11. td 在ie浏览器⾥ 没有边框，⾕歌浏览器正常　　检查发现，td设置了相对定位position:relative,在ie下有兼容问题， 解决：设置background-clip属性（规定背景的绘制区域） ----->

table tr td { padding: 0px; height: 40px; position: relative; background-clip: padding-box;} 12. 多⾏多列的表头thead固定效果图：

图1：

图2：