利用css的sticky特性实现固定首列其他列滚动

复制代码
  1 <!doctype html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
  6     <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/??sm.min.css,sm-extend.min.css">
  7     <title>绩效日报</title>
  8     <style>
  9         body{
 10             background: white;
 11             font-family: 微软雅黑;
 12         }
 13         * {
 14             margin: 0;
 15             padding: 0;
 16         }
 17 
 18         .scrolltable {
 19             position: relative;
 20         }
 21 
 22         .scrolltable th:first-child, .scrolltable tr > td:first-child {
 23             background-color: #ffffff;
 24             position: sticky;/*新特性*/
 25             z-index: 2;
 26         }
 27         .div_abroad{
 28             overflow-x: auto;margin:0 auto;
 29             /*background:#4cff00;*/
 30         }
 31         /*隐藏滚动条*/
 32         .div_abroad::-webkit-scrollbar {
 33             display: none;
 34         }
 35         .tg{
 36             width: 100%;
 37         }
 38         .tg-header{
 39             font-size: 15px;
 40             text-align: center;
 41             font-weight: bold;
 42         }
 43         .tg-row{
 44             font-size: 14px;
 45             text-align: center;
 46             line-height: 34px;
 47         }
 48         .tg-s268{
 49             min-width: 80px;
 50             width: 20%;
 51         }
 52     </style>
 53 </head>
 54 <body>
 55 <div class="report-content">
 56     <div class="div_abroad" >
 57         <table class="scrolltable tg" style="border-collapse: collapse" cellPadding=0 border=0>
 58             <thead>
 59             <tr class="tg-header">
 60                 <th class="tg-s268">销售数据</th>
 61                 <th class="tg-s268">本日</th>
 62                 <th class="tg-s268">本月</th>
 63                 <th class="tg-s268">年度</th>
 64                 <th class="tg-s268">库存</th>
 65                 <th class="tg-s268">库存</th>
 66             </tr>
 67             </thead>
 68             <tbody>
 69             <tr class="tg-row">
 70                 <td class="tg-s268">总计</td>
 71                 <td class="tg-s268">222222</td>
 72                 <td class="tg-s268">33333333</td>
 73                 <td class="tg-s268">44444</td>
 74                 <td class="tg-s268">55555</td>
 75                 <td class="tg-s268">55555</td>
 76             </tr>
 77             <tr class="tg-row">
 78                 <td class="tg-s268">总部</td>
 79                 <td class="tg-s268">222222</td>
 80                 <td class="tg-s268">333333</td>
 81                 <td class="tg-s268">44444</td>
 82                 <td class="tg-s268">55555</td>
 83                 <td class="tg-s268">55555</td>
 84             </tr>
 85             </tbody>
 86         </table>
 87     </div>
 88 
 89     <div class="div_abroad" >
 90         <table class="scrolltable tg" style="border-collapse: collapse" cellPadding=0 border=0>
 91             <thead>
 92             <tr class="tg-header">
 93                 <th class="tg-s268">销售数据</th>
 94                 <th class="tg-s268">本日</th>
 95                 <th class="tg-s268">本月</th>
 96                 <th class="tg-s268">年度</th>
 97                 <th class="tg-s268">库存</th>
 98                 <th class="tg-s268">库存</th>
 99             </tr>
100             </thead>
101             <tbody>
102             <tr class="tg-row">
103                 <td class="tg-s268">总计</td>
104                 <td class="tg-s268">222222</td>
105                 <td class="tg-s268">33333333</td>
106                 <td class="tg-s268">44444</td>
107                 <td class="tg-s268">55555</td>
108                 <td class="tg-s268">55555</td>
109             </tr>
110             <tr class="tg-row">
111                 <td class="tg-s268">总部</td>
112                 <td class="tg-s268">222222</td>
113                 <td class="tg-s268">333333</td>
114                 <td class="tg-s268">44444</td>
115                 <td class="tg-s268">55555</td>
116                 <td class="tg-s268">55555</td>
117             </tr>
118             </tbody>
119         </table>
120     </div>
121 </div>
122 
123 <script src="//apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" charset="utf-8"></script>
124 <script type="text/javascript">
125     $(function () {
126         if ($(".scrolltable>thead>tr>th").length >= 5) {
127 
128             //网页可见区域宽
129             $(".div_abroad").width(document.body.clientWidth);
130             //设置固定列的偏移量
131             $(".scrolltable th:first-child,tr>td:first-child").css("left", $(".div_abroad").offset().left);
132         }
133     });
134 </script>
135 </body>
136 </html>
复制代码

 

posted @   HALDW  阅读(532)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
点击右上角即可分享
微信分享提示