CSS实现表格表头（thead）固定，内容（tbody）滚动

最新推荐文章于 2024-06-17 16:30:49 发布

珍妮的小罐君

最新推荐文章于 2024-06-17 16:30:49 发布

阅读量2.7w

点赞数 15

分类专栏： CSS HTML JavaScript 文章标签： css 表头固定 tbody滚动 transform thead

本文链接：https://blog.csdn.net/qq_36671474/article/details/79622111

版权

前言

最近在写一个项目，然后要实现表头固定，tbody内容滚动的效果，该项目中没有使用任何插件，并且表格列数蛮多的，刚开始实现起来遇到各种问题，感觉蛮复杂的，后来找到了一种利用transform的方法实现，效果还不错，请看代码~~~~~~

————代码————

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <style>
        .table{
            width:100%;
            max-width: 100%;
        }
        .table>thead>tr{
            background: #edf7ff;
        }
        .table>thead>tr>th {
            white-space: nowrap;
            padding: 8px;
            line-height: 1.42857143;
        }

        .table>tbody>tr:nth-child(odd){
             background: #fff;
         }
        .table>tbody>tr:nth-child(even){
            background: #f7f7f7;
        }
        .table>tbody>tr:hover{
            background: #e3ecfc;
        }
        .table-cont{
            /**make table can scroll**/
            max-height: 500px;
            overflow: auto;
            /** add some style**/
            /*padding: 2px;*/
            background: #ddd;
            margin: 20px 10px;
            border: 1px solid #ddd;
        }
    </style>
</head>

<body>
<div class='table-cont' id='table-cont'><!--看这里-->
    <table class="table table-striped">
        <thead>
        <tr>
            <th>委托编号</th>
            <th>交易日</th>
            <th>账户编号</th>
            <th>账户名称</th>
            <th>组合编号</th>
            <th>组合名称</th>
            <th>自定义订单编号</th>
            <th>证券代码</th>
            <th>证券名称</th>
            <th>交易所</th>
            <th>价格类型</th>
            <th>委托价格</th>
            <th>委托数量</th>
            <th>委托金额</th>
            <th>买卖方向</th>
            <th>订单状态</th>
            <th>组合开平标志</th>
            <th>组合投机套保标志</th>
            <th>备兑标志</th>
            <th>报单类型</th>
            <th>今成交数量</th>
            <th>今成交金额</th>
            <th>撤成\废单数量</th>
            <th>剩余数量</th>
            <th>订单总费用</th>
            <th>报单日期</th>
            <th>委托时间</th>
            <th>最后修改时间</th>
            <th>撤销时间</th>
            <th>撤单编号</th>
            <th>操作员编号</th>
            <th>操作员名称</th>
            <th>柜台委托编号</th>
            <th>订单IP</th>
            <th>订单MAC</th>
            <th>订单硬盘序列号</th>
            <th>订单机器码</th>
            <th>订单操作系统</th>
            <th>会话编号</th>
            <th>前置编号</th>
            <th>交易编码</th>
            <th>席位号</th>
            <th>营业部代码</th>
            <th>有效期类型</th>
            <th>成交量类型</th>
            <th>最小成交量</th>
            <th>触发条件</th>
            <th>止损价</th>
            <th>OR委托编号</th>
            <th>状态信息</th>
            <th>发起标志</th>
            <th>预留字段1</th>
            <th>预留字段2</th>
            <th>撤单标志</th>
            <th>备注</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>委托编号</td>
            <td>交易日</td>
            <td>账户编号</td>
            <td>账户名称</td>
            <td>组合编号</td>
            <td>组合名称</td>
            <td>自定义订单编号</td>
            <td>证券代码</td>
            <td>证券名称</td>
            <td>交易所</td>
            <td>价格类型</td>
            <td>委托价格</td>
            <td>委托数量</td>
            <td>委托金额</td>
            <td>买卖方向</td>
            <td>订单状态</td>
            <td>组合开平标志</td>
            <td>组合投机套保标志</td>
            <td>备兑标志</td>
            <td>报单类型</td>
            <td>今成交数量</td>
            <td>今成交金额</td>
            <td>撤成\废单数量</td>
            <td>剩余数量</td>
            <td>订单总费用</td>
            <td>报单日期</td>
            <td>委托时间</td>
            <td>最后修改时间</td>
            <td>撤销时间</td>
            <td>撤单编号</td>
            <td>操作员编号</td>
            <td>操作员名称</td>
            <td>柜台委托编号</td>
            <td>订单IP</td>
            <td>订单MAC</td>
            <td>订单硬盘序列号</td>
            <td>订单机器码</td>
            <td>订单操作系统</td>
            <td>会话编号</td>
            <td>前置编号</td>
            <td>交易编码</td>
            <td>席位号</td>
            <td>营业部代码</td>
            <td>有效期类型</td>
            <td>成交量类型</td>
            <td>最小成交量</td>
            <td>触发条件</td>
            <td>止损价</td>
            <td>OR委托编号</td>
            <td>状态信息

最低0.47元/天解锁文章

珍妮的小罐君

关注

15
点赞
踩
34

收藏

觉得还不错? 一键收藏
18
评论
CSS实现表格表头（thead）固定，内容（tbody）滚动

前言最近在写一个项目，然后要实现表头固定，tbody内容滚动的效果，该项目中没有使用任何插件，并且表格列数蛮多的，刚开始实现起来遇到各种问题，感觉蛮复杂的，后来找到了一种利用transform的方法实现，效果还不错，请看代码~~~~~~————代码————&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="...
复制链接

扫一扫

专栏目录