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属性
5.td⾥嵌套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个2个2个2个2个2个2个
3个3个3个3个3个3个3个
4个4个4个4个4个4个4个
5个5个5个5个5个5个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：html横向滚动条样式
图2：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。