17

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.

6
  • Your first sentence doesn't even make sense to me. Could you try to be more specific, maybe post some example code? Commented Jan 18, 2012 at 15:56
  • ...What? Try and be a bit clearer. Commented Jan 18, 2012 at 15:56
  • table without elements, only elements are there? what? Commented Jan 18, 2012 at 16:01
  • Possible duplicate: stackoverflow.com/questions/296020/… Commented Jan 18, 2012 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. Commented Jan 18, 2012 at 16:30

6 Answers 6

11

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

Sign up to request clarification or add additional context in comments.

3 Comments

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.
@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.
Kinda dynamic <> Dynamic
7

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.

1 Comment

This solution worked for me in a full page, but what if the table is in a scrollable div...
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/

1 Comment

Great plugin made..!!
2

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/

3 Comments

On doing that, row got shifted to bottom
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.
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.
2

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/

2 Comments

Do you have a solution that works if the table exceeds the page width?
this doesn't work if the table is inside a page, because of position fixed always is top level
-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 } }); 

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.