固定表头的前端

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

html如下: 

<div style="padding-left:10px;" class="table-head">
	<table class=" xhe-border" class=" xhe-border" class=" xhe-border">
        <colgroup width="100%">
            <col/><col/>
            <col/><col/>
            <col/>
            <col width="20%"/>
            <col/>
        </colgroup>
       
        <thead>
           <th>名称</th>
            <th>地区</th>
            <th>开始时间</th>
            <th>结束时间</th>
            <th>有效期</th>
            <th style="width:20%">ID</th>
            <th>操作</th>
        </thead>
        
        
    </table>
</div>
<div style="padding-left:10px;overflow-y: auto;" id="mainTab" class="table-body">

    <table id="activityList" class=" xhe-border" class=" xhe-border" class=" xhe-border">
         <colgroup width="100%">
         	<col/><col/>
            <col/><col/>
            <col/>
            <col width="20%"/>
            <col/></colgroup>
        <tbody>
        </tbody>
    </table>
</div>
数据的填充还是使用http://www.highersoft.net/html/notice/notice_431.html这个工具。

定义一下css:

table{
	table-layout: fixed; /*固定了宽度,不然会按内容自动计算*/
	width:100%;
	border-collapse:collapse;
}
.table-head{
	padding-right:15px;
}
.table-head table thead > tr > th {
	padding: 8px;
	line-height: 1.4;
	border: 1px solid #f4f4f4;
	background-color: #ccddbb;
	text-align:center;
}

.table-body{
	overflow-y: auto;
}
.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;
}

表头右边需要有15px左右的空隙,目的是为了占与下面div上的垂直滚动条的宽度。上下有相同的宽度,td才能对齐。

这里有个问题,数据少于一页,不需要滚动条,还有这个样式,岂不是画蛇添足,把页面搞乱对不齐了?

那么在table的数据加载完毕后,用javascript这么处理下:

/**
 * 加载完数据,判断是否有固定表头,有可能需要改变样式
 * @returns
 */
function tabHeightChange(){
	if($(".table-body")){
		if ($(".table-body")[0].clientHeight < $(".table-body")[0].scrollHeight){
			//有滚动条
			let scroll=true;
			$(".table-head").css("padding-right","15px");
		}else{
			$(".table-head").css("padding-right",0);
		}
	}
}


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

//初始化页面高度,超长出滚动条,减去标题上边距,标题,选择条件,固定表头,分页组件
var windowHeight=window.innerHeight-15-20-50-35-77;
$("#mainTab").css("height",windowHeight);

文/中中 浏览次数:0次   2020-03-16 21:42:23

相关阅读


评论: