0

i have a HTML table in which i want to make 1st Row fixed while i scroll, I'm able to make fixed Header Row but i also wanted my 1st Row of my table also be stay fixed. Its been 2 days I'm trying' with no success. Anybody out there had run into this kind a problem ?

<table>
   <thead>
      <tr>
         <th>Header 1</th><th>Header 2</th> // this i have fixed already
      </tr>
   </thead>
   <tbody>
      <tr>....</tr> // this row i want to make fixed while i scroll.
      <tr>....</tr>
   </tbody>
</table>

JSFiddle till now i'hv got this from net

2

3 Answers 3

1

Table can have more than one tbody elements, so you can add this fixed row to first tbody, and rest rows to the second tbody. Then is just some play with css to set it right.

Working demo: http://jsfiddle.net/sMMZ9/4/

Demo is based on this solution

2
  • Hi, one more favour. Now my 1st row is fixed, when the content of the columns are getting bigger the width of the cell is also increasing n thus making row width disturbed, i tried putting table-layout:fixed; but no use
    – FosterZ
    Dec 28, 2011 at 13:03
  • There was wrong widths, and there might be a problem. Try this one: jsfiddle.net/sMMZ9/4
    – Krzysztof
    Dec 28, 2011 at 13:55
1

You need to insert first row inside the <thead> element and apply the same css as you have applied for th element:-

<thead class="fixedHeader">
    <tr class="alternateRow">
        <th><a href="#">Header 1</a></th>
        <th><a href="#">Header 2</a></th>
        <th><a href="#">Header 3</a></th>
    </tr>
    <tr class="normalRow">
        <td>Cell Content 1</td>
        <td>Cell Content 2</td>
        <td>Cell Content 3</td>
    </tr>
</thead>

CSS

html > body thead.fixedHeader td {
    width: 200px;
}

You can also add border as per your design.Hope it'll help you for sure.

2
  • if i do that, my columns widths of 1st Row will mess up, and my each column width are getin' from db.
    – FosterZ
    Dec 28, 2011 at 7:29
  • This do the trick for me Oct 17, 2022 at 20:19
0

How's this:

.scrollContent > tr:first-child{
    position: fixed;
}
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.