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>