表格应用----表格第一行保持固定,其余行可以随鼠标滚动

效果图:

 

先贴代码:

<div class="findBottom">
  <div class="table-head">
    <table cellpadding="0" cellspacing="0">
      <colgroup>
        <col style="width: 20%;" /><col />
        <col style="width: 20%;" /><col />
        <col style="width: 20%;" /><col />
        <col style="width: 20%;" /><col />
        <col style="width: 20%;" /><col />
      </colgroup>
      <thead>
        <tr>
          <th>姓 名</th>
          <th>昵 称</th>
          <th>籍 贯</th>
          <th>原部队</th>
          <th>点击查看详情</th>
        </tr>
      </thead>
    </table>
  </div>
  <div class="table-body">
    <table cellpadding="0" cellspacing="0">
      <colgroup>
        <col style="width: 20%;" /><col />
        <col style="width: 20%;" /><col />
        <col style="width: 20%;" /><col />
        <col style="width: 20%;" /><col />
        <col style="width: 20%;" /><col />
      </colgroup>
      <tbody>
        <tr>
          <td>尹新年</td>
          <td>yxn007</td>
          <td>北京</td>
          <td>八航校</td>
          <td><a href="comradeDeatils.html">详 情</a></td>
        </tr>
        <tr>
          <td>尹新年</td>
          <td>yxn007</td>
          <td>北京</td>
          <td>八航校</td>
          <td><a href="comradeDeatils.html">详 情</a></td>
        </tr>
        <tr>
          <td>尹新年</td>
          <td>yxn007</td>
          <td>北京</td>
          <td>八航校</td>
          <td><a href="comradeDeatils.html">详 情</a></td>
        </tr>
        <tr>
          <td>尹新年</td>
          <td>yxn007</td>
          <td>北京</td>
          <td>八航校</td>
          <td><a href="comradeDeatils.html">详 情</a></td>
        </tr>
        <tr>
          <td>尹新年</td>
          <td>yxn007</td>
          <td>北京</td>
          <td>八航校</td>
          <td><a href="comradeDeatils.html">详 情</a></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

解释:

div.table-head为蓝色区域,div.table-body为浅灰色区域。css中,只要让div.table-body高度固定,overflow-y:auto即可。

核心代码如下:

<colgroup>
    <col style="width: 20%;" /><col />
    <col style="width: 20%;" /><col />
    <col style="width: 20%;" /><col />
    <col style="width: 20%;" /><col />
    <col style="width: 20%;" /><col />
</colgroup>

 一行划分了多少个单元格就对应多少个<col></col>标签,width为相对应单元格所占的宽度比。

posted @ 2017-08-14 15:40  托马斯没有小火车  阅读(515)  评论(0编辑  收藏  举报