thead标签
-
2023年3月5日发(作者：寄语市长)table的td、th的⼀些样式问题（宽度，边框，滚动条，多⾏多列
的表头thead固定）
1.给table加边框
table{
border-collapse:collapse;
/*表格的边框合并为⼀个单⼀的边框*/
}
table,tabletrth,tabletrtd{
border:1pxsolid#ccc;
}
还有种傻傻的⽅法：
table{
border-top:1pxsolid#ccc;
border-left:1pxsolid#ccc;
}
tabletrtd,tabletrth{
border-right:1pxsolid#ccc;
border-bottom:1pxsolid#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属性展⽰完整数据）
tabletrtd{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
（若不⽣效，给table设置宽度和table-layout:fixed;）
超出两⾏，再以省略号显⽰（不兼容ie）：
tabletabletd{
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，与
之间出现空⽩⾏
如图：我在⽤字符串拼接，⽣成表结构的时候，发现渲染出的表结构tr之间有空⾏
varhtml='
$('tbody').append(html);
检查发现：坑啊，结束标志写错了，写错成了，记录下来，不知道有没有⼈和我⼀起犯蠢。
在ie浏览器⾥没有边框，⾕歌浏览器正常
检查发现，td设置了相对定位position:relative,在ie下有兼容问题，
解决：设置background-clip属性（规定背景的绘制区域）----->
tabletrtd{
padding:0px;
height:40px;
position:relative;
background-clip:padding-box;
}
12.多⾏多列的表头thead固定
效果图：
多⾏多列的表头固定
#app{
max-width:400px;
margin:20pxauto;
overflow:hidden;
}
.head-list{
overflow:hidden;/*隐藏thead多余内容和滚动条*/
}
.body-list{
overflow:auto;
max-height:100px;
min-height:0%;/*设置了overflow：auto，在ie9可能会有兼容问题：在td⾥的input输⼊内容时，div的⾼度会增⼤*/
}
.head-listtable{
border-bottom:0none;
}
table{
border:1pxsolid#e7e7e7;
border-collapse:collapse;
table-layout:fixed;
font-size:12px;
color:#666;
width:700px;
}
theadtr{
background-color:#f2f2f2;
height:45px;
}
Trth{
width:100px;/*7*100⼤于总宽度400*/
border-bottom:0none;
}
th,td{
border:1pxsolid#e7e7e7;
text-align:center;
box-sizing:border-box;
}
tabletbodytrtd{
width:100px;
padding:15px0px;
}
| 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个 |
图1：
图2：