对于有些页面列数很多的table，无法使用合适的宽度来全显示的话，可以采用固定表头，然后表体内容可以滚动查询，这样就既可以看到表头信息，同时也可以让每列的宽度设定成最佳呈现宽度，以下是自己写的一个插件 ， 原理是利用js将table拆分成两个table，并分别塞进两个div里头进行样式调整和滚轮绑定，请看代码：
JS代码：
(function(win,doc,undefined){ var splitTable = function(table,srow,newId){ this.table = doc.getElementById(table); this.author = "Aaron Li"; this.srow=srow; this.newId=newId; this.init(); } splitTable.prototype={ constractor:splitTable, init:function() { var _self=this; var split=_self.table.getAttribute("split"); if (split.toString()=="true") { _self.cutTable(_self.table,_self.srow,_self.newId); } }, cutTable:function(table,srow,newId){ var body=document.getElementsByTagName('body')[0]; if(isNaN(srow)) { console.log("msg:srow error"); return; } srow = parseInt(srow); srow = srow<1?1:srow; srow = table.rows.length>srow?srow:(table.rows.length-1); var newtable = table.cloneNode(false); var tbody = newtable.appendChild(document.createElement("tbody")); table.id = newId?newId:(table.id+"_cut"); table.parentNode.insertBefore(newtable,table); for(var i=0;i<srow;i++) { tbody.appendChild(table.rows[0]); } var divNode1=document.createElement("div"); divNode1.setAttribute("id","divHeader"); divNode1.setAttribute("style","overflow: hidden;margin-bottom: 0px;"); var divNode2=document.createElement("div"); divNode2.setAttribute("id","divTbody"); newtable.setAttribute("style","margin-bottom: 0px; table-layout: fixed; "); divNode2.setAttribute("style","overflow-y: scroll; overflow-x: scroll; max-height: 245px"); divNode2.setAttribute("onscroll","javascript:divHeader.scrollLeft = divTbody.scrollLeft;"); table.setAttribute("style","margin-bottom: 0px; table-layout: fixed; "); var tableParent= table.parentNode; divNode1.appendChild(newtable) divNode2.appendChild(table); tableParent.appendChild(divNode1); tableParent.appendChild(divNode2); } } win.splitTable=splitTable; }(window,document))
HTML：
<html> <head></head> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <style> </style> <body> <div id='tableParent'> <table class="table table-striped" id="table1" split="true"> <tr> <th style=" 500px !important">Name</th> <th style=" 500px !important">Age</th> <th style=" 500px !important">Gender</th> <th style=" 500!important">Work</th> </tr> <tr> <td style=" 500px !important">Jack</td> <td style=" 500px !important">18</td> <td style=" 500px !important">Male</td> <td style=" 480!important">Doctor</td> </tr> <tr> <td>Jack</td> <td>18</td> <td>Male</td> <td>Doctor</td> </tr> <tr> <td>Jack</td> <td>18</td> <td>Male</td> <td>Doctor</td> </tr> <tr> <td>Jack</td> <td>18</td> <td>Male</td> <td>Doctor</td> </tr> <tr> <td>Jack</td> <td>18</td> <td>Male</td> <td>Doctor</td> </tr> <tr> <td>Jack</td> <td>18</td> <td>Male</td> <td>Doctor</td> </tr> <tr> <td>Jack</td> <td>18</td> <td>Male</td> <td>Doctor</td> </tr> <tr> <td>Jack</td> <td>18</td> <td>Male</td> <td>Doctor</td> </tr> <tr> <td>Jack</td> <td>18</td> <td>Male</td> <td>Doctor</td> </tr> <tr> <td>Jack</td> <td>18</td> <td>Male</td> <td>Doctor</td> </tr> <tr> <td>Jack</td> <td>18</td> <td>Male</td> <td>Doctor</td> </tr> <tr> <td>Jack</td> <td>18</td> <td>Male</td> <td>Doctor</td> </tr> <tr> <td>Jack</td> <td>18</td> <td>Male</td> <td>Doctor</td> </tr> </table> </div> </body> <script src="./test.js"></script> <script type="text/javascript"> window.onload=function(){ var table =new splitTable("table1",1,"table2"); } </script> </html>
我们来看一下效果：
table的头部和表体被拆分到两个div里进行操作， 用户可以点击滑动滚轮来查看表的内容，当有多个表需要使用这种模式的时候可以调用这个插件，抵用插件的时候要定好需要使用的table的ID，同时设定split="true",同时设定好预期需要的适合的列宽，注意表头和表体都要设定，表体设定一次即可。
加载插件代码，同时设定table的ID，从第几行开始切割, 第三个参数是被拆分后的新table的ID，当然也可以不设，会默认生成。
快试试吧。
结语：插件要是能自动生成合适的列宽就更棒了，目前还没想好怎么写，插件不足的地方希望大神们多多指教。