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

table多⾏宽度不⼀致_table的td、th的⼀些样式问题（宽度，边框，滚动条，多⾏多。。。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固定效果图：多⾏多列的表头固定max-width: 400px;margin: 20px auto;overflow: hidden;}.head-list{overflow: hidden;/*隐藏thead多余内容和滚动条*/}.body-list{overflow: auto;max-height: 100px;min-height: 0%; /*设置了overflow：auto，在ie9可能会有兼容问题：在td⾥的input输⼊内容时，div的⾼度会增⼤*/}.head-list table{border-bottom: 0none;}table{border: 1px solid #e7e7e7;border-collapse: collapse;table-layout: fixed;font-size: 12px;color: #666;width: 700px;}thead tr {background-color: #f2f2f2;height: 45px;}thead .secondTr th{width: 100px;/*7*100 ⼤于总宽度400*/border-bottom: 0none;}th,td{border: 1px solid #e7e7e7;text-align: center;box-sizing: border-box;}table tbody tr td {width: 100px;padding: 15px 0px;}⽔果⼈名玩具苹果⾹蕉JayLucyNick⼩汽车娃娃2个3个4个5个2个3个4个5个2个3个4个5个2个3个4个5个2个3个4个5个2个3个4个5个2个3个4个5个//不加js的情况下，此时页⾯tbody已经出现横纵滚动条，但在滚动横向滚动条时，表头不动(见图1)。所以要设置⼀个scroll事件，让表头随着表体滚动$('.body-list').on('scroll', function() {$(".head-list").scrollLeft($('.body-list').scrollLeft());});var divHeight = $(".body-list").height();var tableHeight = $(".body-list table").height();//出现纵向滚动条时，给表头div添加margin样式(略丑，但是不加margin，会导致横向条滚到最右，上下表格发⽣错位，见图2)if(tableHeight >divHeight){$(".head-list").css('margin-right','17px');}图1：图2：

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

table多⾏宽度不⼀致_table的td、th的⼀些样式问题（宽度，边框，滚动条，多⾏多。。。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固定效果图：多⾏多列的表头固定max-width: 400px;margin: 20px auto;overflow: hidden;}.head-list{overflow: hidden;/*隐藏thead多余内容和滚动条*/}.body-list{overflow: auto;max-height: 100px;min-height: 0%; /*设置了overflow：auto，在ie9可能会有兼容问题：在td⾥的input输⼊内容时，div的⾼度会增⼤*/}.head-list table{border-bottom: 0none;}table{border: 1px solid #e7e7e7;border-collapse: collapse;table-layout: fixed;font-size: 12px;color: #666;width: 700px;}thead tr {background-color: #f2f2f2;height: 45px;}thead .secondTr th{width: 100px;/*7*100 ⼤于总宽度400*/border-bottom: 0none;}th,td{border: 1px solid #e7e7e7;text-align: center;box-sizing: border-box;}table tbody tr td {width: 100px;padding: 15px 0px;}⽔果⼈名玩具苹果⾹蕉JayLucyNick⼩汽车娃娃2个3个4个5个2个3个4个5个2个3个4个5个2个3个4个5个2个3个4个5个2个3个4个5个2个3个4个5个//不加js的情况下，此时页⾯tbody已经出现横纵滚动条，但在滚动横向滚动条时，表头不动(见图1)。所以要设置⼀个scroll事件，让表头随着表体滚动$('.body-list').on('scroll', function() {$(".head-list").scrollLeft($('.body-list').scrollLeft());});var divHeight = $(".body-list").height();var tableHeight = $(".body-list table").height();//出现纵向滚动条时，给表头div添加margin样式(略丑，但是不加margin，会导致横向条滚到最右，上下表格发⽣错位，见图2)if(tableHeight >divHeight){$(".head-list").css('margin-right','17px');}图1：图2：