How to make table row fixed at the top

Question

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.

Your first sentence doesn't even make sense to me. Could you try to be more specific, maybe post some example code? — opatut, Jan 18 '12 at 15:56
Possible duplicate: http://stackoverflow.com/questions/296020/how-can-i-lock-the-first-row-and-first-column-of-a-table-when-scrolling-possibl — Dennis Traub, Jan 18 '12 at 16:14
Fixed width? Fixed relative to the browser client area? Fixed because it's broken? Table rows don't move on their own. — 3Dave, Jan 18 '12 at 16:30
You should check back to your questions to check edits and other answers. Also accept answers if it solved your problem. — Fabian, Jan 20 '12 at 11:35

score 9 · Answer 1 · answered Apr 09 '15 at 14:41

9

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! :)

answered Apr 09 '15 at 14:41

pedromendessk

3,380
2
24
35

1

while the other answers work nicely, this is the cleanest solution. It does not need special "dummy" row (which needs to have the exact same height as the static row) and page scroller is displayed properly from the point the table really scrolls. – FurloSK Jul 14 '16 at 12:03
@Benjo what do you mean with fixed width columns? if you look at the jsfiddle example, you can use % (width: 19.2%;), which is kinda dynamic. – pedromendessk Jul 19 '19 at 08:10
1

Kinda dynamic <> Dynamic – Benjo Jul 20 '19 at 09:17

score 5 · Answer 2 · answered Feb 17 '14 at 08:33

5

i wrote plugin which can freeze any row (not only th) at the top of page or container. feel free to use it. http://maslianok.github.io/stickyRows/

answered Feb 17 '14 at 08:33

Vitalii Maslianok

1,571
1
13
16

Great plugin made..!! – Parag Tyagi Apr 16 '14 at 09:43

score 3 · Answer 3 · answered Feb 11 '21 at 11:52

All of the solutions have a drawback: header row is not properly aligned with the content. One of the workarounds used was setting the width to some value (either absolute or percent).

Basing on pedromendessk answer I was able to find a neat solution to this question using answer from: how-do-i-make-a-table-scrollable

So for the table presented in question solution would be:

tr:first-child {
  position: sticky;
  top: 0;
  background: white;
}

Personally I'd use th for table headers, because using tr:first-child won't work correctly after adding thead and tbody.

Fabian · Answer 4 · 2012-01-18T16:26:02.303

3

Setting position:fixed should do that for you:

<tr style="position:fixed">
    <td>Name:</td>
    <td>Age:</td>
</tr>

Edit:

<tr style="position:fixed;top:0;background:#FFF;">
    <td>Name:</td>
    <td>Age:</td>
</tr>

<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>

Example: http://jsfiddle.net/aVQjN/

edited Jan 18 '12 at 16:26

answered Jan 18 '12 at 16:13

Fabian

3,390
4
33
41

On doing that, row got shifted to bottom – n92 Jan 18 '12 at 16:16
1

This is a good fix, but the row under this row needs to have no content, and the first row will also need a background color. or else you will have two layers of text, and they will be unreadable. – BrettAdamsGA Jan 18 '12 at 16:23
3

You have to set the widths on the table cells when you use position fixed on a table row - this solution will fail with more than a couple columns. – Jonathan Tonge Dec 01 '14 at 20:30

score 2 · Answer 5 · answered Jan 18 '12 at 16:41

On the row that you want to stay fixed, set the style position: fixed and set a background color to that row, or you will end up having two layers of text when you scroll the list.

Another issue to pay attention to is the fact that the first row will be hidden under the fixed row, due to how the fixed position style works. to fix this put in a blank row.

<table width="400" border="1">
    <tr style="position: fixed; background-color: grey;">
        <td width="200">
            Name
        </td>
        <td width="200">
            Age
        </td>
    </tr>
    <tr>
        <td width="200">
            &nbsp;
        </td>
        <td width="200">
            &nbsp;
        </td>
    </tr>
    <tr>
        <td>
            John
        </td>
        <td>
            28
        </td>
    </tr>
    <tr>
        <td>
            Jacob
        </td>
        <td>
            22
        </td>
    </tr>
    <tr>
        <td>
            Nicole
        </td>
        <td>
            12
        </td>
    </tr>
</table>

See link for my full code. http://jsfiddle.net/brettadamsga/yeAhU/

Do you have a solution that works if the table exceeds the page width? — tommy.carstensen, May 25 '16 at 23:01
this doesn't work if the table is inside a page, because of position fixed always is top level — Michael B., May 04 '19 at 20:24

score -3 · Answer 6 · edited Mar 08 '18 at 14:21

-3

Use of data table we can fixed the header and footer also. Find the below Code......

tbl_Purcordr=$("#tbl_Purcordr").DataTable({
  'paging': true,
  'pageLength': 25,
  'bLengthChange': false,
  'sorting': false,
  'filter': true,
  'info': false,
  'scrollY': 360,
  'background': 'none',
  'fixedHeader': {
    'header': true,
    'footer': true
  }
});

edited Mar 08 '18 at 14:21

Fabian S.

2,370
2
25
33

answered Mar 08 '18 at 13:47

Dipak

1

How to make table row fixed at the top

6 Answers6

Linked