Как сделать прокручиваемую таблицу с фиксированными заголовками с помощью CSS

Я хочу, чтобы заголовок таблицы был исправлен. Таблет присутствует внутри прокручиваемого div. Пожалуйста, посмотрите мой код здесь: http://jsfiddle.net/w7Mm8/114/ kindly предложите мне решение этого.

Спасибо

Мой код:

<div style="position: absolute; height: 200px; overflow: auto; ">
    <div style="height: 250px;">
        <table border="1">
            <th>head1</th>
            <th>head2</th>
            <th>head3</th>
            <th>head4</th>
            <tr>
                <td>row 1, cell 1</td>
                <td>row 1, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 1, cell 2</td>
            </tr>
            <tr>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 1, cell 2</td>
            </tr>
        </table>
    </div>
</div>

Ответы

Ответ 1

То, что вы хотите сделать, - это разделить содержимое таблицы из заголовка таблицы. Вы хотите прокручивать только элементы <th>. Вы можете легко определить это разделение в HTML с элементами <tbody> и <thead>.
Теперь заголовок и тело таблицы все еще связаны друг с другом, они все равно будут иметь одинаковую ширину (и те же свойства прокрутки). Теперь, чтобы позволить им "работать" как таблица больше, вы можете установить display: block. Таким образом, <thead> и <tbody> разделены.

table tbody, table thead
{
    display: block;
}

Теперь вы можете установить прокрутку в тело таблицы:

table tbody 
{
   overflow: auto;
   height: 100px;
}

И последнее, поскольку <thead> не имеет той же ширины, что и тело, вы должны установить статическую ширину в заголовок таблицы:

th
{
    width: 72px;
}

Вы также должны установить статическую ширину для <td>. Это решает проблему несогласованных столбцов.

td
{
    width: 72px;
}

Обратите внимание, что вам также не хватает некоторых элементов HTML. Каждая строка должна быть в элементе <tr>, который включает строку заголовка: 
<tr>
     <th>head1</th>
     <th>head2</th>
     <th>head3</th>
     <th>head4</th>
</tr>

Надеюсь, это то, что вы имели в виду.

jsFiddle

добавление

Если вы хотите иметь больший контроль над ширинами столбцов, пусть они меняются по ширине друг от друга, а курс поддерживает выравнивание столбцов заголовка и тела, вы можете использовать следующий пример:

    table th:nth-child(1), td:nth-child(1) { min-width: 50px;  max-width: 50px; }
    table th:nth-child(2), td:nth-child(2) { min-width: 100px; max-width: 100px; }
    table th:nth-child(3), td:nth-child(3) { min-width: 150px; max-width: 150px; }
    table th:nth-child(4), td:nth-child(4) { min-width: 200px; max-width: 200px; }

Ответ 2

Я могу придумать наглый способ сделать это, я не думаю, что это будет лучший вариант, но он будет работать.

Создайте заголовок как отдельную таблицу, затем поместите другую в div и установите максимальный размер, затем разрешите прокрутку с помощью overflow.

table {
  width: 500px;
}

.scroll {
  max-height: 60px;
  overflow: auto;
}
<table border="1">
  <tr>
  <th>head1</th>
  <th>head2</th>
  <th>head3</th>
  <th>head4</th>
  </tr>
</table>
<div class="scroll">
  <table>
    <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr>
    <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr>
    <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr>
    <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr>
    <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr>
    <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr>
    <tr><td>More Text</td><td>More Text</td><td>More Text</td><td>More Text</td></tr>
    <tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr>
    <tr><td>Even More Text Text</td><td>Even More Text Text</td><td>Even More Text Text</td><td>Even More Text Text</td></tr>
  </table>
</div>