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

Question

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

Благодаря

Мой код:

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

Answer 1

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

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

HTML:

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

CSS:

table { 
    width: 500px; 
} 

.scroll { 
    max-height: 60px; 
    overflow: auto; 
} 

DEMO HERE

Answer 2

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