table表头固定表体滚动

最新推荐文章于 2024-04-01 18:32:05 发布

front_end_fan

最新推荐文章于 2024-04-01 18:32:05 发布

阅读量1.4k

点赞数 1

文章标签： table固定表头

本文链接：https://blog.csdn.net/qq_39198420/article/details/76439392

版权

实际的项目中需要用到弹出框包含表格时，万一表格很长不方便显示，这时就需要滚动表格，那么怎么才能实现呢？
如下，是用纯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>

这里写图片描述

front_end_fan

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
table表头固定表体滚动

实际的项目中需要用到弹出框包含表格时，万一表格很长不方便显示，这时就需要滚动表格，那么怎么才能实现呢？如下，是用纯css实现的滚动表格（但是firefox和360极速模式下存在兼容性问题，有待提高）原理：外面一个大的div，包裹两个div>tabel,上面一个div原来模拟固定的表头，下面的div设置overflow-y:auto; 其中用到 colgroup 标签，点我了解colgrou
复制链接

扫一扫