HTML实现表头固定且双向滚动条
⽹上了许多种⽅法，可能学疏才浅，本⼈并没有实现，或者⽅法并不能满⾜⼤表单（双向滚动条）的需求；
1.⼤致思路：使⽤两个table，保证head和body宽度⼀致即可，以下例⼦，为完全展⽰body中每个单元格内容，故动态⽣成表头，根据已经⽣成的表单宽度去设定表头宽度；然后保证两个div 公⽤滚动条。
2.实现单元格内容⾃动换⾏或者⾃动以...代替的关键点在于：设定单元格宽度
直接上demo
<html>
<head>
<title>表头固定</title>
<style>
table.table_head {
table-layout: fixed;  //在此固定表头宽度，使表头和内容对齐
}
table.table_head thead {
background: grey;
html横向滚动条样式
}
table.table_head th {
text-align: center;
overflow: hidden;
text-overflow: ellipsis; //表头宽度是根据内容设定的，设置相关属性，超出长度以省略号代替
}
table.table_body{
}
table.table_body td{
text-align:left;
min-width: 100px; //设定内容单元格最⼩宽度
}
</style>
</head>
<body>
<div>
<div id="head"
οnscrοll="ElementById('body').scrollLeft = this.scrollLeft;"> //两个div共⽤横向滚动轴
<table class="table table-bordered table-hover table_head" >
<thead>
<tr id="column_name"></tr>
</thead>
</table>
</div>
<div id="body"
οnscrοll="ElementById('head').scrollLeft = this.scrollLeft;"> //两个div共⽤横向滚动轴
<table class="table table-bordered table-hover table_body">
<tbody id="column_value">
<tr>
<td id="1" nowrap='nowrap'> 第⼀
</td>
<td id="2" nowrap='nowrap'> 第⼆
</td>
<td id="3" nowrap='nowrap'> 第三
</td>
<td id="4" nowrap='nowrap' > 第四
</td>
<td id="5" nowrap='nowrap' > 第五
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
$(function () {
var withs = [];
for (var j = 1; j < 6; j++) {
withs.ElementById(j).offsetWidth);
}
//动态⽣成表头
$.each(withs, function (i, value) {
var withsVal = withs[i] + "px";
var a = "<th data-toggle=\"tooltip\"  title=\"" + value + "\" " +
"style=\" width: " + withsVal + "\">" +" asdfkjhaskfjhaslkfjhaslkfjhaslfkjhsal" +                    "</th>";
$("#column_name").append(a);
});
});
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。