将表格标题与表格数据行对齐

Question

我有一些HTML代码可以生成包含标题和数据行的HTML表格。标题列不与数据列对齐。

我从我在网上找到的一个例子中得到了这段代码。我想要标题单元格宽度匹配表的数据单元格宽度。

这里是下面的代码是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%; } 

为什么头不与下面的数据列调心？

Answer 1

我结束了使用datatables插件（datatables.net）。

Answer 2

检查你的CSS：

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

我增加了th。

此外，从

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

padding-top: 1.7em;除去在顶部，以除去黑色空间。它应该工作（在Chrome中测试）。