將表格標題與表格數據行對齊

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中測試）。