修正了滚动Div内的表头 [英] Fixed header in table inside scrollable Div

问题描述

下面的代码

 < div>部分页面内容< / div> 
 
< div style =max-height：200px; overflow：auto;> 
< table id =test> 
< thead> 
< tr> 
< th> 
< / th> 
< / th> 
< / thead> 
< tbody> 
< tr> 
< td>< / td> 
< / tr> 
< / tbody> 
< / table> 
 
< div>部分页面内容< / div> 
  

我试着让垂直滚动条分区，所以如果它超过最大高度得到滚动条，它工作正常。

现在我试图修复Header以固定

我试过 position：固定为TH ，它的作用是保持头部全部固定在页面上。我在固定头文件中看到了几篇关于相同的文章，并且对实现这些文章的最佳方式感到困惑，因为它们中的大多数都是旧的答案。

我的输出应该像Div表）应该是可滚动的，并且标题仅针对该表而固定，而不是针对整个页面。

希望能有一个简单和更好的方法来达到这个目的。

谢谢

解决方案

您可以尝试将标题与内容分开： http ：//jsfiddle.net/u2xZU/
并将标题放在可滚动内容的外面。

基本上，使用两个表格，一个用于标题和一个内容：

 < div>一些页面内容< / div> 
< table> 
< thead> 
< tr> 
< th> Head1< / th> 
< th> Head2< / th> 
< th> Head3< / th> 
< / tr> 
< / thead> 
< / table> 
< div style =max-height：200px; overflow：auto;> 
< table id =test> 
< tbody> 
< tr> < TD>内容< / TD> < TD>内容< / TD> < TD>内容< / TD> < / TR> 
< tr> < TD>内容< / TD> < TD>内容< / TD> < TD>内容< / TD> < / TR> 
< tr> < TD>内容< / TD> < TD>内容< / TD> < TD>内容< / TD> < / TR> 
< tr> < TD>内容< / TD> < TD>内容< / TD> < TD>内容< / TD> < / TR> 
< tr> < TD>内容< / TD> < TD>内容< / TD> < TD>内容< / TD> < / TR> 
< tr> < TD>内容< / TD> < TD>内容< / TD> < TD>内容< / TD> < / TR> 
< tr> < TD>内容< / TD> < TD>内容< / TD> < TD>内容< / TD> < / TR> 
< tr> < TD>内容< / TD> < TD>内容< / TD> < TD>内容< / TD> < / TR> 
< tr> < TD>内容< / TD> < TD>内容< / TD> < TD>内容< / TD> < / TR> 
< tr> < TD>内容< / TD> < TD>内容< / TD> < TD>内容< / TD> < / TR> 
< / tbody> 
< / table> 
< / div> 
< div>部分页面内容< / div> 
  

My code below

<div>Some Page Content </div>

<div style="max-height: 200px; overflow: auto;">
<table id="test">
<thead>
<tr>
<th>
</th>
</th>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>

<div>Some Page Content </div>

Am trying to have vertical scroll bar for Div so if it exceeds the max height am getting the scroll bar which is working fine.

Now i tried to fix the Header to be fixed

i tried position:Fixed for TH and what it does is it keeps the header fixed all through the page. I saw few posts regarding the same on Fixed header and am confused of the best way of implementing these as most of them are old answers.

My Output should be like Div(Table) should be scrollable and the header to Fixed only for that table and not for the Entire page.

Hoping for a simple and better approach to achieve this

Thanks

解决方案

You can try to separate the header from the content: http://jsfiddle.net/u2xZU/ and put the header outside the scrollable content.

Basically, use two tables, one for the header and one for the content:

<div>Some Page Content </div>
    <table>
            <thead>
                <tr>
                    <th>Head1</th>
                    <th>Head2</th>
                    <th>Head3</th>
                </tr>
            </thead>
    </table>
    <div style="max-height: 200px; overflow: auto;">
        <table id="test">
            <tbody>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
            </tbody>
        </table>
    </div>
<div>Some Page Content </div>

这篇关于修正了滚动Div内的表头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！