html table first row (first ) freeze along with table header

Question

Am using html table in my project.

I want to make my html table header and first row freeze. I know how to make header freeze. But am not able to fix first row freeze. Can any one help me on this?

Thanks

refer my answer. [1]: http://stackoverflow.com/questions/26030703/how-to-keep-header-row-fixed-while-scrolling-on-a-sortable-table — Darshak Shekhda, Sep 25 '14 at 05:27

Control Freak · Accepted Answer · 2014-09-25T06:02:32.537

Revised with Snippets

I would just put the featured/highlighted (first) row in the thead group and it will be fixed with your header row as well.

<style>
  table { width:100%; }
  table thead { position:fixed; }
  table thead tr th { text-align: left; }
  table tbody { position:absolute; top:60px; }
</style>

<table>
  <thead>
    <tr><th>Header</th></tr>
    <tr><td>Highlighted Row</td></tr>
  </thead>
  <tbody>
     <tr><td>Row 1</td></tr>
     <tr><td>Row 2</td></tr>
     <tr><td>Row 3</td></tr>
     <tr><td>Row 4</td></tr>
     <tr><td>Row 5</td></tr>
     <tr><td>Row 6</td></tr>
     <tr><td>Row 7</td></tr>
     <tr><td>Row 8</td></tr>
     <tr><td>Row 9</td></tr>
     <tr><td>Row 10</td></tr>
  </tbody>
</table>

DimoMohit · Answer 2 · 2014-09-25T06:14:15.977

1

I think answer by @Darshak Shekhda is sufficient but still if you want more explanation you can refer JSFiddle Example. You can use { position:absolute; overflow:scroll; } to achieve your design. You can use :nth-child(rowNumber){ position:absolute; overflow:scroll; } to select desired row. Hope this helps.

edited Sep 25 '14 at 06:14

answered Sep 25 '14 at 06:06

DimoMohit

735
4
17

html table first row (first ) freeze along with table header

2 Answers2

Revised with Snippets