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.
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! :)
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.
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/
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> </td> <td> </td> </tr> Example: http://jsfiddle.net/aVQjN/
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"> </td> <td width="200"> </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/
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 } }); 
