0

I have table inside a div, 

 <div class="divScroll">
  <table class="table1">
  <tr class="tableHeader">
   <th>Header1</th>
   <th>Header2</th>
   <th>Header3</th>
   <th>Header4</th>
   <th>Header5</th>
   </tr>
  <tr>
   <td>Data1</td>
   <td>Data2</td>
   <td>Data3</td>
   <td>Data4</td>
   <td>Data5</td>
   </tr>
   .....
   .....
  </table>
 </div>

My CSS,

 .divScroll
 {
   height: 25px;
   overflow-y: auto;
   width: 100%
 }

 .table1
 {
   width: 100%;
   table-layout: fixed;
 }

 .tableHeader
 {
   position: absolute;
 }

In the above coed, I am trying to make table scrollable with fixed header. That means when user scroll top-> bottom table header should remain fixed only table data should be scrolled.

I can achieve, scrollable table but problem is th col width are not aligned with td col width Since i applied Position : absolute for 'th'.

How to make both th and td col width aligned properly?

user472269
  • 367
  • 1
  • 4
  • 19
  • Fixed table header isn't as easy as you thought, try googling "fixed table header" and follow a solution that works for you. – Stickers Sep 29 '15 at 01:12

1 Answers1

0

It is a very common question, already answered in the past.

Here some local resources:

And here another external:

Community
  • 1
  • 1
Luca Detomi
  • 5,564
  • 7
  • 52
  • 77