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; width:100%; table-layout:fixed;//core code } table thead { width: 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{ width:20%; } .per10{ width:10%; } .per40{ width:40%; } table tbody { display: block; height:150px; overflow:auto; } table thead, tbody tr { display:table; width:100%; table-layout:fixed; text-align: left;//If disabled, default align central } table thead { width: 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