网上找了许多种方法，可能学疏才浅，本人并没有实现，或者方法并不能满足大表单（双向滚动条）的需求；
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样式可以实现不随滚动条移动的固定表头，使得用户在滚动查看长表格时仍能清晰看到列标题。 13. **表头合并**： GridView支持多列多行的表头合并，通过设置`HeaderStyle-CssClass`和`HeaderRowStyle-Css...
- 使用CSS实现固定表头，即使滚动页面，表头依然可见。 14. **合并表头**： - 对于复杂的报表结构，可以实现多重表头的合并，提供清晰的层次感。 15. **突出显示单元格**： - 根据业务规则，比如金额低于一定值...
使用CSS实现表头固定，只需要简单的几行代码就能实现平滑滚动的效果。 ##### 15. GridView合并表头多重表头无错完美版 合并表头是一项常见的需求，可以通过设置`HeaderStyle-CssClass`属性，并结合HTML标签来实现...
14. **固定表头**：通过CSS设置表格样式，实现滚动时表头固定。 15. **合并表头**：利用HeaderRow的Cells属性和GridView的.RowStyle属性，可以实现复杂的多级表头合并。 16. **突出显示某一单元格**：在...
使用CSS定位技术实现滚动时表头固定。 14. **合并表头** 复杂的表头合并可以创建多重表头，增强数据可视性。 15. **突出显示单元格** 根据特定条件（如数值低于某个值）动态改变单元格样式。 16. **自动求和、...
使用CSS可以实现无需JavaScript的固定表头效果，保持表格在滚动时表头始终可见。 15. **合并表头**： 通过设置GridView的HeaderRowStyle和RowStyle，可以实现复杂多层的表头合并。 16. **突出显示某一单元格**：...
- 使用CSS定位技术，如`position: sticky`，来实现表头的固定效果。 ##### 15. GridView合并表头多重表头无错完美版 **描述**：合并多列表头，创建复杂表头结构。 **实现方法**： - 通过`MergeCells`属性来合并...
15. **固定表头**：使用CSS定位技术，使表头在表格滚动时始终保持可见。 16. **合并表头多重表头无错完美版**：通过CSS和HTML结构，可以创建复杂的多级表头，使数据显示更清晰。 17. **突出显示某一单元格**：基于...
- 使用CSS实现固定表头，即使在滚动页面时表头始终保持可见。 13. **合并表头**： - 通过设置GridView的列和行合并属性，可以创建复杂的多重表头布局。 14. **突出显示单元格**： - 根据条件判断，可以改变...
- **功能概述**：实现表头在滚动时保持固定位置，而不需要使用JavaScript。 - **实现方式**：使用CSS定位属性来实现表头的固定效果。 #### 15. GridView合并表头多重表头无错完美版（以合并3列3行举例） - **功能...
- 使用CSS实现固定表头，即使在滚动时也能保持表头可见。 14. **合并表头** - 通过CSS和HTML布局技巧实现多级合并表头。 15. **突出显示特定条件的单元格** - 利用模板列和条件判断，当满足特定条件时改变...
- 使用CSS定位技巧，将表头固定在屏幕顶部，即使在滚动时仍可见。 13. **合并表头**： - 通过设置HeaderRow的Cell的ColSpan属性，可以实现复杂的多列或多行合并效果。 14. **突出显示单元格**： - 在...
- 通过CSS定位技术，可以实现当表格滚动时，表头始终保持可见。 14. **合并表头**： - 通过设置 `HeaderRowStyle` 和 `.RowStyle` 的CSS，可以实现复杂的多级表头合并。 15. **突出显示特定单元格**： - 使用 `...
- 通过CSS的`position`和`z-index`属性实现表格的固定表头，即使在滚动时也能保持可见。 14. **合并表头**： - 通过设置列的`HeaderRowStyle`和`.RowStyle`属性，以及HTML表格的`colspan`和`rowspan`属性，可以...
利用CSS的`position: sticky`属性，可以实现在滚动时表头始终保持可见的效果，无需使用JavaScript。 ### GridView合并表头多重表头 通过设置`HeaderStyle-CssClass`并应用特定的CSS规则，可以实现表头的合并，创建...
固定表头可以让用户在滚动表格时始终看到列标题，这对于大型表格非常有用。虽然可以通过JavaScript实现，但更简单的方法是使用CSS的`position: sticky`属性。 #### 15. GridView合并表头 合并表头可以创建更加复杂...
- 使用CSS的`position: sticky`属性可以实现表头固定在顶部，即使在滚动时也可见。 15. **合并表头**： - 通过自定义模板和CSS，可以实现复杂的多级表头合并。 16. **突出显示特定单元格**： - 在`RowDataBound...