问题描述:如何在 Jsp 中冻结表格,就想 Excel 中一样,将第一排冻住,然后下拉也不会滚动。也就是说当表格行数很多的时候,如果有滚动条,只滚动表格里面的数据,表头那一行不滚动,永远固定在顶部。
解决办法:
1. 用 3 个 div 来实现。
- <div id='table'>
- <div id='title'>这里写表头可以用一个表格</div>
- <div id='content'>这里写表体,可以用另外一个表格</div>
- </div>
注意:需要写一个 css 样式进行控制。
2. 很多 table 固定表头的思路,大多都是将表头和内容放在两个 table 里来处理的,表头和数据放在两个 table 中,第二个 table 放在 div 里面!
但有没有将表头和内容放在一个 table里来实现固定表都的方法呢?因为放在两个 table 时,但很难控制列的对齐,当表体内容多而生成滚动条时,表头和标题的列对不齐了。
表头和详细数据分别放在两个 table中,然后才放在最外层 table 中。 如果明细中出现数据超长时明细表格发生变形,头部表格不会跟着变化。所以变得不能对齐。
方法是可以对明细表的第一行加 id:dtRow,对 head 表中的行加 id:headRow。js:onload时加载执行:“headRow 的所有 td 子节点的宽度 = dtRow 的所有 td 子节点的宽度”。
3. 用一个 table 也可以实现,但需要 js 来控制。
- 例子:
- window.onload = function() {
- var tab = document.getElementById("tableId");
- if (tab) {
- fixRow(tab);
- }
- }
- function fixRow(tab) {
- var div = tab.parentNode;
- if (div.className.toLowerCase() == "freezediv") {
- tab.rows[0].style.zIndex = "1";
- tab.rows[0].style.position = "relative";
- div.onscroll = function() {
- var tr = tab.rows[0];
- tr.style.top = this.scrollTop - (this.scrollTop == 0 ? 1 : 2);
- tr.style.left = -1;
- }
- }
- }