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

检查你的CSS：

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

我添加了th。

此外，从

中删除了padding-top: 1.7em;

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

删除顶部的黑色空间。它应该工作（在Chrome中测试）。

Answer 2

我最终使用了datatables插件（datatables.net）。

将HTML表头与表数据行对齐

2 个答案: