CODEWITHSUNDEEP
htmlcss
FosterZ
FosterZ

Reputation: 3911

make 1 Row of a table fixed

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

Upvotes: 0

Views: 5321

Answers (3)

Krzysztof
Krzysztof

Reputation: 16140

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

Upvotes: 1

Gurvinder
Gurvinder

Reputation: 790

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.

Upvotes: 1

akai
akai

Reputation: 529

How's this:

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

Upvotes: 0

Related Questions