固定表头的前端

固定表头的核心是与标签。首先定义好表头与表格主体，有几列就几个，这样可以分别定义宽度。

html如下: 

<div  class="table-head">
	<table >
        <colgroup width="100%">
            <col width="20%"/><col width="9%"/><col width="9%"/>
            <col width="10%"/><col width="30%"/>
            <col width="12%"/><col width="15%"/>
        </colgroup>
       
        <thead>
            <th>URL</th>
            <th>vid</th>
			<th>uid</th>
            <th>事件名</th>
            <th>目标文案</th>
            <th>访问时间</th>
            <th>操作</th>
        </thead>
        
        
    </table>
</div>
<div  id="mainTab" class="table-body">         	
  	 <table id="recordListTab">
  	 	<colgroup width="100%">
            <col width="20%"/><col width="9%"/><col width="9%"/>
            <col width="10%"/><col width="30%"/>
            <col width="12%"/><col width="15%"/>
        </colgroup>
  		<tbody id="recordListTabTbody">
  		</tbody>
  	</table>
</div>
<div class="table-page" id="recordListTabPageDiv"></div>

数据的填充还是使用http://www.highersoft.net/html/notice/notice_431.html这个工具。

有了固定表头，还有一个麻烦的问题是如何固定表格高度。固定了高度,内容可能超出这个高度，超出后出滚动条。

table的数据内容超出外层div(table-body)的内容后，需出滚动条，但table与div的宽度都是100%，这时就有了矛盾。滚动条占的空间实际是div(table-body)的，出现滚动条，很明显要使table的宽度达不到100%。

要减多少呢？其实就是$(".table-body").outerWidth()-$(".table-body").innerWidth();
这样，div(table-header)与div(table)的宽度都减去这个值，就能对齐每个td和th了。

定义一下css:

table{
	table-layout: fixed; /*固定了宽度，不然会按内容自动计算*/
	width:100%;
	border-collapse:collapse;
}

.table-head table thead > tr > th {
	padding: 8px;
	line-height: 1.4;
	border: 1px solid #f4f4f4;
	background-color: #ccddbb;
	text-align:center;
}
.table-head{
	padding:0px 0px 0px 0px;
}
.table-body{
	overflow-y: auto;
	overflow-x: hidden;
	padding:0px 0px 10px 0px;
	/*scrollbar-width:none;*/

}
.table-body table tbody >tr >td{
	padding: 8px;
	line-height: 1.4;
	border: 1px solid #f4f4f4;
	text-align:center;
	word-break: break-all; 
	word-wrap: break-word;
}
.table-page{
	width:100%;
	padding:0px 10px 10px 0px;

}

当然，要mainTab出现滚动条，需要定义mainTab的高度。我的页面是这么计算的。

var windowHeight=window.innerHeight-40-40-77;
//$("#mainTab").css("height",windowHeight);
$(".table-body").css("height",windowHeight);
let changeWidth=$(".table-body").outerWidth()-$(".table-body").innerWidth();
let width=$(".table-head").width()-changeWidth;
$(".table-head").css("width",width);
$("#recordListTab").css("width",width);