Question

我的代码

<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>

我试图让vertical scroll bar为Div，如果它超过了最大高度，那么滚动条工作正常。

现在我试图修复要修复的标题

我尝试了position:Fixed for TH，它的作用是保持标题在整个页面中都得到修复。我在固定标题上看到了一些关于相同内容的帖子，并且对实现这些内容的最佳方式感到困惑，因为大多数都是旧答案。

我的输出应该像Div（表格）应该是可滚动的，标题只能固定为该表而不是整页。

希望有一种简单而更好的方法来实现这个目标

由于

Answer 1

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

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

<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>

Answer 2

使用

position:absolute

在父元素上使用position:relative，它应该是绝对的。你需要详细了解定位。我建议你this tutorial。它快速的方式来获得定位。

修复了可滚动Div内的表格中的标题

2 个答案: