固定标题和可滚动主体 [英] Fixed header and scrollable body

问题描述

我在表中有15列。我想滚动水平和垂直和标题应该是固定的，当我滚动垂直。我试过了各种例子，但没有运气。我看到的所有标题列都不与数据对齐。列宽不固定，因为列数因用户选择而异

请指导我正确的示例。

<$ p

$ p> < div class =Headers>
< table class =NewHeader>
< tr>
< / tr>
< / table>
< / div>
< div class =Table>
< table class =MyTable>
< tr>
< th>
< / th>
。
。
。
< / tr>
< tr>
< td>
< / td>
。
。
。
< / tr>
< / div>

现在有一点JavaScript或JQuery你可以得到th，设置其宽度匹配单元格width，并将th单元格移动到标题表格

  $（document）.ready（function（）{
 var counter = 0; 
 $（。MyTable th）每个（function（）{
 var width = $（'。MyTable tr：last td：eq（'+ counter + ）'）。width（）; 
 $（。NewHeader tr）append（this）; 
 this.width = width; 
 counter ++; 
}）; 
}）; 
  

现在只剩下做的就是用overflow将滚动第二个表的头将保持在原地，我使用jquery简化可读性，但可以在JavaScript中完成相同的方式

现场演示

自动垂直滚动主体和页眉示例

I have like 15 columns in the table. I want to scroll both horizontal and vertical and header should be fixed when I scroll vertical. I have tried various examples but no luck. All I see header columns are not aligning with data. Column width are not fixed as number of columns vary based on the user selection

Please guide me to the correct example.

解决方案

what you could do is a bit of visual trick to achieve this, use two div tags

<div class="Headers">
<table class="NewHeader">
<tr>
</tr>
</table>
</div>
<div class="Table">
<table class="MyTable">
<tr>
<th>
</th>
.
.
.
</tr>
<tr>
<td>
</td>
.
.
.
</tr>
</div>

now with a bit of JavaScript or JQuery you can get the th, set its width to match the cell width, and move the th cell to the "Headers" table

$(document).ready(function(){
    var counter = 0;
    $(".MyTable th").each(function(){
        var width = $('.MyTable tr:last td:eq(' + counter + ')').width();
        $(".NewHeader tr").append(this);
        this.width = width;
        counter++;
    });
});

now only is left to do is to style the div "Table" with overflow, so now if you would scroll the second table the header will remain in place, i used jquery to simplify the readability, but can be done in JavaScript is same way

Live Demo

Example with automatic vertical scroll body and header

这篇关于固定标题和可滚动主体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！