网上找了许多种方法，可能学疏才浅，本人并没有实现，或者方法并不能满足大表单（双向滚动条）的需求；
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;
}
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" style="width: 583px;overflow:hidden; "
onscroll="document.getElementById('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" style="width: 600px;height:300px; overflow:scroll;"
onscroll="document.getElementById('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.push(document.getElementById(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>
相关推荐
使用CSS定位技术实现滚动时表头固定。 14. **合并表头** 复杂的表头合并可以创建多重表头，增强数据可视性。 15. **突出显示单元格** 根据特定条件（如数值低于某个值）动态改变单元格样式。 16. **自动求和、...
15. **固定表头**：使用CSS定位技术，使表头在表格滚动时始终保持可见。 16. **合并表头多重表头无错完美版**：通过CSS和HTML结构，可以创建复杂的多级表头，使数据显示更清晰。 17. **突出显示某一单元格**：基于...
- 使用CSS实现固定表头，即使在滚动时也能保持表头可见。 14. **合并表头** - 通过CSS和HTML布局技巧实现多级合并表头。 15. **突出显示特定条件的单元格** - 利用模板列和条件判断，当满足特定条件时改变...