title: Aligning HTML table header with table data rows
body: <p>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.</p>
  
  <p>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. </p>
  
  <p>Here is the below code is jsfiddle: <a href="http://jsfiddle.net/tee3n/" rel="nofollow">http://jsfiddle.net/tee3n/</a>.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="scrollableContainer"&gt;
    &lt;div class="scrollingArea"&gt;
     &lt;table class="cruises scrollable"&gt;
       &lt;thead&gt;
          &lt;tr&gt;
           &lt;th&gt;&lt;div class="name"&gt;Name&lt;/div&gt;&lt;/th&gt;
           &lt;th&gt;&lt;div class="operator"&gt;Operator&lt;/div&gt;&lt;/th&gt;
           &lt;th&gt;&lt;div class="began"&gt;Began operation&lt;/div&gt;&lt;/th&gt;
           &lt;th&gt;&lt;div class="tonnage"&gt;Tonnage&lt;/div&gt;&lt;/th&gt;
           &lt;th&gt;&lt;div class="status"&gt;Status&lt;/div&gt;&lt;/th&gt;
       &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
            &lt;td&gt;&lt;div class="name"&gt;Name of ship&lt;/div&gt;&lt;/td&gt;
            &lt;td&gt;&lt;div class="operator"&gt;Who operates&lt;/div&gt;&lt;/td&gt;
            &lt;td&gt;&lt;div class="began"&gt;Began service when&lt;/div&gt;&lt;/td&gt;
            &lt;td&gt;&lt;div class="tonnage"&gt;How big&lt;/div&gt;&lt;/td&gt;
            &lt;td&gt;&lt;div class="status"&gt;Current status&lt;/div&gt;&lt;/td&gt;                        
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;&lt;div class="name"&gt;Name of ship&lt;/div&gt;&lt;/td&gt;
            &lt;td&gt;&lt;div class="operator"&gt;Who operates&lt;/div&gt;&lt;/td&gt;
            &lt;td&gt;&lt;div class="began"&gt;Began service when&lt;/div&gt;&lt;/td&gt;
            &lt;td&gt;&lt;div class="tonnage"&gt;How big&lt;/div&gt;&lt;/td&gt;
            &lt;td&gt;&lt;div class="status"&gt;Current status&lt;/div&gt;&lt;/td&gt;                        
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;&lt;div class="name"&gt;Name of ship&lt;/div&gt;&lt;/td&gt;
            &lt;td&gt;&lt;div class="operator"&gt;Who operates&lt;/div&gt;&lt;/td&gt;
            &lt;td&gt;&lt;div class="began"&gt;Began service when&lt;/div&gt;&lt;/td&gt;
            &lt;td&gt;&lt;div class="tonnage"&gt;How big&lt;/div&gt;&lt;/td&gt;
            &lt;td&gt;&lt;div class="status"&gt;Current status&lt;/div&gt;&lt;/td&gt;                        
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;&lt;div class="name"&gt;Name of ship&lt;/div&gt;&lt;/td&gt;
            &lt;td&gt;&lt;div class="operator"&gt;Who operates&lt;/div&gt;&lt;/td&gt;
            &lt;td&gt;&lt;div class="began"&gt;Began service when&lt;/div&gt;&lt;/td&gt;
            &lt;td&gt;&lt;div class="tonnage"&gt;How big&lt;/div&gt;&lt;/td&gt;
            &lt;td&gt;&lt;div class="status"&gt;Current status&lt;/div&gt;&lt;/td&gt;                        
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;&lt;div class="name"&gt;Name of ship&lt;/div&gt;&lt;/td&gt;
            &lt;td&gt;&lt;div class="operator"&gt;Who operates&lt;/div&gt;&lt;/td&gt;
            &lt;td&gt;&lt;div class="began"&gt;Began service when&lt;/div&gt;&lt;/td&gt;
            &lt;td&gt;&lt;div class="tonnage"&gt;How big&lt;/div&gt;&lt;/td&gt;
            &lt;td&gt;&lt;div class="status"&gt;Current status&lt;/div&gt;&lt;/td&gt;                        
          &lt;/tr&gt;&lt;tr&gt;
            &lt;td&gt;&lt;div class="name"&gt;Name of ship&lt;/div&gt;&lt;/td&gt;
            &lt;td&gt;&lt;div class="operator"&gt;Who operates&lt;/div&gt;&lt;/td&gt;
            &lt;td&gt;&lt;div class="began"&gt;Began service when&lt;/div&gt;&lt;/td&gt;
            &lt;td&gt;&lt;div class="tonnage"&gt;How big&lt;/div&gt;&lt;/td&gt;
            &lt;td&gt;&lt;div class="status"&gt;Current status&lt;/div&gt;&lt;/td&gt;                        
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;&lt;div class="name"&gt;Name of ship&lt;/div&gt;&lt;/td&gt;
            &lt;td&gt;&lt;div class="operator"&gt;Who operates&lt;/div&gt;&lt;/td&gt;
            &lt;td&gt;&lt;div class="began"&gt;Began service when&lt;/div&gt;&lt;/td&gt;
            &lt;td&gt;&lt;div class="tonnage"&gt;How big&lt;/div&gt;&lt;/td&gt;
            &lt;td&gt;&lt;div class="status"&gt;Current status&lt;/div&gt;&lt;/td&gt;                        
          &lt;/tr&gt;&lt;/tr&gt;&lt;tr&gt;
            &lt;td&gt;&lt;div class="name"&gt;Name of ship&lt;/div&gt;&lt;/td&gt;
            &lt;td&gt;&lt;div class="operator"&gt;Who operates&lt;/div&gt;&lt;/td&gt;
            &lt;td&gt;&lt;div class="began"&gt;Began service when&lt;/div&gt;&lt;/td&gt;
            &lt;td&gt;&lt;div class="tonnage"&gt;How big&lt;/div&gt;&lt;/td&gt;
            &lt;td&gt;&lt;div class="status"&gt;Current status&lt;/div&gt;&lt;/td&gt;                        
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;&lt;div class="name"&gt;Name of ship&lt;/div&gt;&lt;/td&gt;
            &lt;td&gt;&lt;div class="operator"&gt;Who operates&lt;/div&gt;&lt;/td&gt;
            &lt;td&gt;&lt;div class="began"&gt;Began service when&lt;/div&gt;&lt;/td&gt;
            &lt;td&gt;&lt;div class="tonnage"&gt;How big&lt;/div&gt;&lt;/td&gt;
            &lt;td&gt;&lt;div class="status"&gt;Current status&lt;/div&gt;&lt;/td&gt;                        
          &lt;/tr&gt;
          &lt;/tr&gt;&lt;tr&gt;
            &lt;td&gt;&lt;div class="name"&gt;Name of ship&lt;/div&gt;&lt;/td&gt;
            &lt;td&gt;&lt;div class="operator"&gt;Who operates&lt;/div&gt;&lt;/td&gt;
            &lt;td&gt;&lt;div class="began"&gt;Began service when&lt;/div&gt;&lt;/td&gt;
            &lt;td&gt;&lt;div class="tonnage"&gt;How big&lt;/div&gt;&lt;/td&gt;
            &lt;td&gt;&lt;div class="status"&gt;Current status&lt;/div&gt;&lt;/td&gt;                        
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;&lt;div class="name"&gt;Name of ship&lt;/div&gt;&lt;/td&gt;
            &lt;td&gt;&lt;div class="operator"&gt;Who operates&lt;/div&gt;&lt;/td&gt;
            &lt;td&gt;&lt;div class="began"&gt;Began service when&lt;/div&gt;&lt;/td&gt;
            &lt;td&gt;&lt;div class="tonnage"&gt;How big&lt;/div&gt;&lt;/td&gt;
            &lt;td&gt;&lt;div class="status"&gt;Current status&lt;/div&gt;&lt;/td&gt;                        
          &lt;/tr&gt;
        &lt;/tbody&gt;
     &lt;/table&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>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%; }
  </code></pre>
  
  <p>Why is the header not aligning up with the data columns underneath?</p>