Исправлен заголовок в таблице внутри прокручиваемого Div

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 и что он делает, это держит заголовок фиксированным на протяжении всей страницы. Я видел несколько постов, относящихся к одному и тому же в заголовке Fixed, и меня не устраивает лучший способ их реализации, так как большинство из них - старые ответы.

Мой вывод должен быть похож на Div(Таблица) должен быть прокручиваемым, а заголовок для Fixed только для этой таблицы, а не для всей страницы.

Надеемся на простой и лучший подход для достижения этой цели

Спасибо

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 на родительский элемент, относительно которого он должен быть абсолютным. Вам нужно изучить позиционирование в деталях. Я бы порекомендовал вам этот урок. Это быстрый способ получить руки на позиционирование.