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

Answer 1

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/

Answer 2

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/

Answer 3

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/

Answer 4

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

Answer 5

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
  }
});