Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make table row fixed at the top

Tags:

html

css

I have a table without th elements, Only td elements are there. Is there any way to make My first row fixed(label). The table is like this

<table>
  <tr>
    <td>Name:</td>
    <td>Age:</td>
  </tr>
  <tr>
    <td>John</td>
    <td>20</td>
  </tr>
  <tr>
    ......
  </tr>
</table>

I want to make first row with the fields Name and Age as fixed. So that during the scrolling the labels will not disappear.

like image 707
n92 Avatar asked Jan 18 '12 15:01

n92


People also ask

How do I make a static header in a table?

By setting the position property to “sticky” and specifying “0” as a value of the top property for the <th> element. By setting the display to “block” for both <thead> and <tbody> element so that we can apply the height and overflow properties to <tbody>.

How do I make my table header fixed while scrolling?

By setting postion: sticky and top: 0, we can create a fixed header on a scroll in HTML tables.

How do I freeze the first column in a table?

Freeze columns and rows Select the cell below the rows and to the right of the columns you want to keep visible when you scroll. Select View > Freeze Panes > Freeze Panes.


1 Answers

I've been searching for an answer for this problem for a while and finally I've found something that works very nice.

The secret is in this piece of code that makes the scrolling possible in the table

thead, tbody, tr, td, th { display: block; }

But you can find a full example here http://jsfiddle.net/T9Bhm/7/.

Hope it helps! :)

like image 129
pedromendessk Avatar answered Oct 01 '22 03:10

pedromendessk