CODEWITHSUNDEEP
jquerycsshtml
srakl
srakl

Reputation: 2619

how to make html table first row 'absolute'

i've got a table with 80 rows. how would i make the 1st row absolute? tried adding 

position: absolute;

to the but that didn't work. is there away to do it using css or 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>

Edit: sorry I meant fixed not absolute. My bad

Upvotes: 0

Views: 7157

Answers (3)

Silencer
Silencer

Reputation: 1618

Here is one thing you can do if you want to scroll a table while the header will remain in place, but there are still problems with columns not aligning, and you have to make the header shorter so it doesn't go other the scroll bar:

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

Upvotes: 0

mishik
mishik

Reputation: 10003

I assume you were looking for a way to make your first row to always get displayed on top even when page scrolls. absolute is not the way to do that. Think like position:absolute "glues" your element to a position on a page, then if a page scrolls - your elements scroll with the page and gets out of view.

If you want your header to stick to top no matter what - you will need to involve some css tricks.

Here is an example of such technique.

The easiest way would be, of course, to use position: fixed: Demo

Upvotes: 4

Mohammad Areeb Siddiqui
Mohammad Areeb Siddiqui

Reputation: 10179

Do it like this:

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

Just use the first-child pseudo element.

Or as discussed by @mishik then you may need that to be position: fixed or position: relative; top: 0;.

Upvotes: 1

Related Questions