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.

Dennis Traub
  • 50,557
  • 7
  • 93
  • 108
n92
  • 7,424
  • 27
  • 93
  • 129
  • 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
  • ...What? Try and be a bit clearer. – Jivings Jan 18 '12 at 15:56
  • table without elements, only elements are there? what? – Fabian Jan 18 '12 at 16:01
  • 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

6 Answers6

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

pedromendessk
  • 3,538
  • 2
  • 24
  • 36
  • 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
6

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.

oxym
  • 86
  • 1
  • 3
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/

Vitalii Maslianok
  • 1,601
  • 1
  • 14
  • 16
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/

Fabian
  • 3,465
  • 4
  • 34
  • 42
  • 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. –  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
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/

-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
  }
});
Fabian S.
  • 2,441
  • 2
  • 24
  • 34
Dipak
  • 1