1 前言
table下tbody滚动条与thead对齐的方法，开始在tbody的td和thead的tr>td，对每一个Item加入百分比，结果是没对齐。也尝试了用bootstrap的col-md-1等来对齐，也是对不齐。然后只能网上查找答案了，就只需看用CSS来控制样式即可达到目的
2 代码
核心代码：
<style>
table tbody {
display:block; //core code
height:200px;
overflow-y:scroll;
}
table thead, tbody tr {
display:table;
100%;
table-layout:fixed;//core code
}
table thead {
calc( 100% - 1em )//core code
}
</style>
如果只要上面的配置，默认是均等平分table大小的。
完整样例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Test table tbody is alignment with thead</title>
<style type="text/css">
.per20{
20%;
}
.per10{
10%;
}
.per40{
40%;
}
table tbody {
display: block;
height:150px;
overflow:auto;
}
table thead, tbody tr {
display:table;
100%;
table-layout:fixed;
text-align: left;//If disabled, default align central
}
table thead {
calc( 100% - 1em )
}
</style>
<script>
window.onload=function(){
var contentSum = "";
for(i = 0; i < 16; i++){
var content = '<tr>'
+ '<td class="per10">'+i+'</td>'
+ '<td class="per10">BBB</td>'
+ '<td class="per20">CCCcontent</td>'
+ '<td class="per10">DDD</td>'
+ '<td class="per40">EEEBigbig</td>'
+ '<td class="per10">FFFXXX</td>'
+'</tr>';
contentSum += content;
}
//$('#content').html(contentSum);
document.getElementById('content').innerHTML=contentSum;
}
</script>
</head>
<body>
<table border="1px solid" width="900px">
<thead>
<tr>
<th class="per10">A</th>
<th class="per10">BBB</th>
<th class="per20">CCCCCCCCCC</th>
<th class="per10">D</th>
<th class="per40">EEEEEEEEEEEEEE</th>
<th class="per10">FFF</th>
</tr>
</thead>
<tbody id="content">
<!-- <tr>
<td class="per10">1</td>
<td class="per10">BBB</td>
<td class="per20">CCCcontent</td>
<td class="per10">DDD</td>
<td class="per40">EEEBigbig</td>
<td class="per10">FFFXXX</td>
</tr> -->
</tbody>
</table>
</body>
</html>
3 效果图
4 参考
http://www.weste.net/2016/01-15/108242.html