table表头固定表体滚动

来源：互联网发布：数据直报系统编辑：程序博客网时间：2024/06/07 14:53

实际的项目中需要用到弹出框包含表格时，万一表格很长不方便显示，这时就需要滚动表格，那么怎么才能实现呢？
如下，是用纯css实现的滚动表格（但是firefox和360极速模式下存在兼容性问题，有待提高）

原理：外面一个大的div，包裹两个div>tabel,上面一个div原来模拟固定的表头，下面的div设置overflow-y:auto;
其中用到 colgroup 标签，点我了解colgroup标签的用法

<!doctype html><html><head><meta charset="utf-8"><title>纯css表头固定-jq22.com</title><script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>  .tableWrap {    width:600px;    box-sizing:border-box;}.table-thead {    width:auto;    font-size:14px;    background-color:#FFF;    border:1px solid #CFCFCF;    border-collapse:collapse;    border-spacing:0px;}.table-thead tr th {    text-align:left;    padding-left:10px;    border-right:1px solid #CFCFCF;}.table-thead tr th:last-child,.table-thead tr th:nth-last-child(2) {    border-right:0;}.table-thead tr,.table-tbody tr {    height:35px;}.table-tbody {    width:auto;    font-size:14px;    background-color:#FFF;    border-left:1px solid #CFCFCF;    border-collapse:collapse;    border-spacing:0px;}.table-tbody tr {    border-bottom:1px solid #CFCFCF;}.table-tbody tr td {    padding-left:10px;    padding-right:10px;    border-right:1px solid #CFCFCF;}.comTbody {    width:auto;    display:inline-block;    max-height:100px;    overflow-y:auto;    border-bottom:1px solid #CFCFCF;}</style></head><body><div class="tableWrap" style="margin:20px;">  <table class="table-thead">    <colgroup>    <col width="50">    <col width="100">    <col width="150">    <col width="17">    </colgroup>    <thead>      <tr>        <th>序号</th>        <th>账户名称</th>        <th>账户编号</th>        <th></th>      </tr>    </thead>  </table>  <div class="comTbody">    <table class="table-tbody" style="border-top: 0;">      <colgroup>      <col width="50">      <col width="100">      <col width="150">      </colgroup>      <tbody>        <tr>          <td>1</td>          <td>中国电信</td>          <td>12312312313132</td>        </tr>        <tr>          <td>1</td>          <td>中国电信</td>          <td>12312312313132</td>        </tr>        <tr>          <td>1</td>          <td>中国电信</td>          <td>12312312313132</td>        </tr>        <tr>          <td>1</td>          <td>中国电信</td>          <td>12312312313132</td>        </tr>        <tr>          <td>1</td>          <td>中国电信</td>          <td>12312312313132</td>        </tr>      </tbody>    </table>  </div></div></body></html>

这里写图片描述

阅读全文

0 0