Как сделать таблицу html first row 'absolute'

Question

У меня есть таблица с 80 строками. как я могу сделать первую строку абсолютной? попытался добавить

position: absolute; 

, но это не сработало. есть ли это сделать, используя css или jquery?

<table> 
<thead> 
<tr> 
    <td style="position: absolute;"></td><td style="position: absolute;"></td> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td></td><td></td> 
</tr> 
<tr> 
    <td></td><td></td> 
</tr> 
</tbody> 
</table> 

Редактировать: извините, я имел в виду фиксированное не абсолютное. Мой плохой

Answer 1

Я предполагаю, что вы искали способ сделать свою первую строку всегда отображаемой сверху, даже когда свитки страниц. absolute - это не способ сделать это. Подумайте, как position:absolute «склеивает» ваш элемент в позицию на странице, а затем, если страница прокручивается - ваши элементы прокручиваются со страницы и выходят из поля зрения.

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

Это example такой техники.

Проще всего было бы, конечно, использовать position: fixed: Demo

Answer 2

Делают это так:

table thead tr:first-child { 
    position: absolute; 
} 

Просто используйте элемент first-child псевдо.

Или, как обсуждалось @mishik то вам, возможно, нужно, чтобы быть position: fixed или position: relative; top: 0;.

Answer 3

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

<div style="position:relative;"> 
<div style="overflow: auto;"> 
    <table> 
    <thead style="position:absolute;"> 
    <!-- Header here --> 
    </thead> 
    <tbody> <!-- body here --> </tbody> 
    </table> 
</div> 
</div>