3

我有一些 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%; }

为什么标题与下面的数据列不对齐？

4

2 回答 2

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 中测试）。

于 2012-10-30T22:28:40.193 回答
1

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

于 2014-06-10T19:15:49.353 回答