Aligning HTML table header with table data rows

Question

I have some HTML code that generates an HTML table with header and data rows. The header columns do not line up with the data columns.

I got this code from an example I found online. I want the header cell widths to match the data cell widths of the table.

Here is the below code is jsfiddle: http://jsfiddle.net/tee3n/.

HTML

<div class="scrollableContainer">
  <div class="scrollingArea">
   <table class="cruises scrollable">
     <thead>
        <tr>
         <th><div class="name">Name</div></th>
         <th><div class="operator">Operator</div></th>
         <th><div class="began">Began operation</div></th>
         <th><div class="tonnage">Tonnage</div></th>
         <th><div class="status">Status</div></th>
     </tr>
    </thead>
    <tbody>
        <tr>
          <td><div class="name">Name of ship</div></td>
          <td><div class="operator">Who operates</div></td>
          <td><div class="began">Began service when</div></td>
          <td><div class="tonnage">How big</div></td>
          <td><div class="status">Current status</div></td>                        
        </tr>
        <tr>
          <td><div class="name">Name of ship</div></td>
          <td><div class="operator">Who operates</div></td>
          <td><div class="began">Began service when</div></td>
          <td><div class="tonnage">How big</div></td>
          <td><div class="status">Current status</div></td>                        
        </tr>
        <tr>
          <td><div class="name">Name of ship</div></td>
          <td><div class="operator">Who operates</div></td>
          <td><div class="began">Began service when</div></td>
          <td><div class="tonnage">How big</div></td>
          <td><div class="status">Current status</div></td>                        
        </tr>
        <tr>
          <td><div class="name">Name of ship</div></td>
          <td><div class="operator">Who operates</div></td>
          <td><div class="began">Began service when</div></td>
          <td><div class="tonnage">How big</div></td>
          <td><div class="status">Current status</div></td>                        
        </tr>
        <tr>
          <td><div class="name">Name of ship</div></td>
          <td><div class="operator">Who operates</div></td>
          <td><div class="began">Began service when</div></td>
          <td><div class="tonnage">How big</div></td>
          <td><div class="status">Current status</div></td>                        
        </tr><tr>
          <td><div class="name">Name of ship</div></td>
          <td><div class="operator">Who operates</div></td>
          <td><div class="began">Began service when</div></td>
          <td><div class="tonnage">How big</div></td>
          <td><div class="status">Current status</div></td>                        
        </tr>
        <tr>
          <td><div class="name">Name of ship</div></td>
          <td><div class="operator">Who operates</div></td>
          <td><div class="began">Began service when</div></td>
          <td><div class="tonnage">How big</div></td>
          <td><div class="status">Current status</div></td>                        
        </tr></tr><tr>
          <td><div class="name">Name of ship</div></td>
          <td><div class="operator">Who operates</div></td>
          <td><div class="began">Began service when</div></td>
          <td><div class="tonnage">How big</div></td>
          <td><div class="status">Current status</div></td>                        
        </tr>
        <tr>
          <td><div class="name">Name of ship</div></td>
          <td><div class="operator">Who operates</div></td>
          <td><div class="began">Began service when</div></td>
          <td><div class="tonnage">How big</div></td>
          <td><div class="status">Current status</div></td>                        
        </tr>
        </tr><tr>
          <td><div class="name">Name of ship</div></td>
          <td><div class="operator">Who operates</div></td>
          <td><div class="began">Began service when</div></td>
          <td><div class="tonnage">How big</div></td>
          <td><div class="status">Current status</div></td>                        
        </tr>
        <tr>
          <td><div class="name">Name of ship</div></td>
          <td><div class="operator">Who operates</div></td>
          <td><div class="began">Began service when</div></td>
          <td><div class="tonnage">How big</div></td>
          <td><div class="status">Current status</div></td>                        
        </tr>
      </tbody>
   </table>
 </div>
</div>

CSS:

table.cruises { 
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 11px;
    cellspacing: 0; 
    border-collapse: collapse; 
    width: 99.9%;    
    }
  table.cruises th, table.cruises td { 
    border-right: 1px solid #999; 
    border-bottom: 1px solid #999; 
    width: 20%;
    }
  table.cruises th { background: #aab; }
  table.cruises td { background: #eee; }

  div.scrollableContainer { 
    position: relative; 
    width: 80%; 
    padding-top: 1.7em; 
    margin: 40px;    
    border: 1px solid #999;
    background: black;
    }
  div.scrollingArea { 
    width: 100%;
    height: 240px; 
    overflow: auto; 
    }
  table.scrollable thead tr {
    left: 0; top: 0;
    position: absolute;
    width: auto;
    }

  table.cruises .name     { width: 20%; }
  table.cruises .operator { width: 20%; }
  table.cruises .began    { width: 20%; text-align:center; }
  table.cruises .tonnage  { width: 20%; text-align:center; }
  table.cruises .status   { width: 20%; }

Why is the header not aligning up with the data columns underneath?

did you manage to solve this?

ah-shiang han
– ah-shiang han

2014-01-24 07:36:17 +00:00
Commented Jan 24, 2014 at 7:36 — ah-shiang han
– ah-shiang han, Commented Jan 24, 2014 at 7:36
I ended up using datatables plugin (datatables.net).

Valter
– Valter

2014-01-25 18:29:30 +00:00
Commented Jan 25, 2014 at 18:29 — Valter
– Valter, Commented Jan 25, 2014 at 18:29

Sablefoste · Accepted Answer · 2012-10-30 22:28:40Z

1

Check your CSS:

  table.scrollable thead th tr {
    left: 0; top: 0;
    position: absolute;
    width: auto;
    }

I added the th.

Also, removed padding-top: 1.7em; from the

 div.scrollableContainer { 
    position: relative; 
    width: 80%; 
    padding-top: 1.7em; 
    margin: 40px;    
    border: 1px solid #999;
    background: black;
    }

to remove the black space at the top. It should work (tested in Chrome).

answered Oct 30, 2012 at 22:28

Sablefoste

4,2123 gold badges41 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Valter Over a year ago

Thanks Sable Foste but that is not what i am looking for it, I want the header to be fixed.

Sablefoste Over a year ago

Then I am confused... in you fiddle, it looks like you have what you want, only the columns are not aligned with the table body. They are off by the width of the scroll bar. Are you wanting to pop the scrollbar off to the left of the whole table?

Valter Over a year ago

If you open my fiddle on IE7... that's what i want. But it doesn't work on IE8 or IE9. On IE8 and IE9 the thead colums doesn't align with tbody columns.

Valter · Accepted Answer · 2014-06-10 19:15:49Z

1

I ended up using datatables plugin (datatables.net).

answered Jun 10, 2014 at 19:15

Valter

2,8995 gold badges33 silver badges51 bronze badges

Collectives™ on Stack Overflow

Aligning HTML table header with table data rows

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related