table下tbody滚动条与thead对齐的方法且每一列可以不均等

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