整理了下:

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title></title>
  7. <meta charset="utf-8" />
  8. <style type="text/css">
  9. * {
  10. margin: 0;
  11. padding: 0;
  12. }
  13.  
  14. table {
  15. width: 100%;
  16. text-align: center;
  17. border-collapse: collapse;
  18. border-spacing: 0;
  19. }
  20.  
  21. table td {
  22. word-break: break-all;
  23. word-wrap: break-word;
  24. }
  25.  
  26. .container {
  27. width: 600px;
  28. height: 500px;
  29. padding: 0;
  30. box-sizing: border-box;
  31. }
  32.  
  33. #left-div {
  34. width: 80px;
  35. float: left;
  36. }
  37.  
  38. #left-div1 {
  39. width: 100%;
  40. }
  41.  
  42. #left-div2 {
  43. width: 100%;
  44. height: 250px;
  45. overflow: hidden;
  46. }
  47.  
  48. #left-table2 {
  49. margin-bottom: 4px;
  50. }
  51.  
  52. #right-div {
  53. float: left;
  54. width: 240px;
  55. }
  56.  
  57. #right-div1 {
  58. width: 100%;
  59. overflow: hidden;
  60. }
  61.  
  62. #right-div2 {
  63. width: 100%;
  64. height: 250px;
  65. overflow: auto;
  66. }
  67.  
  68. #right-table1 {
  69. width: 320px;
  70. }
  71.  
  72. #right-table2 {
  73. width: 320px;
  74. overflow: auto;
  75. }
  76.  
  77. th,
  78. td {
  79. height: 50px;
  80. width: 80px;
  81. line-height: 50px;
  82. overflow: hidden;
  83. text-align: center;
  84. }
  85.  
  86. th {
  87. color: #1E304F;
  88. background-color: #F3F8FF;
  89. }
  90.  
  91. td {
  92. color: #384967;
  93. }
  94.  
  95. tr:nth-of-type(odd) {
  96. background: #E7F2FF;
  97. }
  98.  
  99. /*可以美化一下滚动条*/
  100. #right-div2::-webkit-scrollbar {
  101. /*滚动条整体样式*/
  102. width: 4px;
  103. height: 4px;
  104. }
  105.  
  106. #right-div2::-webkit-scrollbar-thumb {
  107. /*滚动条里面小方块*/
  108. border-radius: 5px;
  109. box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  110. background: rgba(0, 0, 0, 0.2);
  111. }
  112.  
  113. #right-div2::-webkit-scrollbar-track {
  114. /*滚动条里面轨道*/
  115. box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  116. border-radius: 0;
  117. background: rgba(0, 0, 0, 0.1);
  118. }
  119. </style>
  120. <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  121.  
  122. <script type="text/javascript">
  123. $(function () {
  124. //生成表格内容
  125. let htmlLeft = '';
  126. let htmlRight = '';
  127. for (let i = 1; i <= 7; i++) {
  128. htmlLeft += '<tr>';
  129. htmlLeft += '<td>' + i + '</td>';
  130. htmlLeft += '</tr>';
  131. }
  132. for (let i = 1; i <= 7; i++) {
  133. htmlRight += '<tr>';
  134. htmlRight += '<td>A</td>';
  135. htmlRight += '<td>100</td>';
  136. htmlRight += '<td>500</td>';
  137. htmlRight += '<td>1</td>';
  138. htmlRight += '</tr>';
  139. }
  140. $('#left-table2').html(htmlLeft);
  141. $('#right-table2').html(htmlRight);
  142. //滚动
  143. $('#right-div2').on('scroll', function () {
  144. let top = $(this).scrollTop();
  145. let left = $(this).scrollLeft();
  146. $('#left-div2').scrollTop(top);
  147. $('#right-div1').scrollLeft(left);
  148. })
  149. });
  150. </script>
  151. </head>
  152.  
  153. <body>
  154. <div class="container">
  155. <div id="left-div">
  156. <div id="left-div1">
  157. <table>
  158. <tr>
  159. <th>编号</th>
  160. </tr>
  161. </table>
  162. </div>
  163. <div id="left-div2">
  164. <table id="left-table2"></table>
  165. </div>
  166. </div>
  167. <div id="right-div">
  168. <div id="right-div1">
  169. <table id="right-table1">
  170. <tr>
  171. <th>设备名称</th>
  172. <th>设备类型</th>
  173. <th>故障类型</th>
  174. <th>故障状态</th>
  175. </tr>
  176. </table>
  177. </div>
  178. <div id="right-div2">
  179. <table id="right-table2"></table>
  180. </div>
  181. </div>
  182. </div>
  183. </body>
  184.  
  185. </html>

table 表格固定表头和第一列、内容可滚动的更多相关文章

  1. JS+CSS - table 表格固定表头和第一列、内容可滚动 (转载)

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. layui数据表格固定头部和第一列、colspan合并列

    刚看到原型图的时候,纳尼?不是跟我开玩笑吧,小女子资历尚浅,还真没做过像这样的功能,然后就是各种找度娘,可是都没有找到合适的,很多都是行合并,真的是头疼呀!再纠结是用VUE实现还是用layui实现好, ...

  3. (转)supertable像excel那样固定table的表头和第一列

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title> ...

  4. 使用bootstrap table 插件固定表头时 表头与表格内容无法对齐

    在使用bootstrap table开发后台管理系统,表格利用bootstrap-table插件来实现,使用bootstrap-table过程中,会出现表头错位的情况 表头对不齐效果: 解决的方法: ...

  5. 解决react使用antd table组件固定表头后,表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐

    一.固定表头后表体列和表头不对齐 此问题可能在antd3.24.0版本之前都存在,反正3.16.2版本是存在这个问题的,如果是3.24.0之前的版本估计只能通过修改css样式解决. 按照官网说的: 1 ...

  6. jQuery制作多表格固定表头、切换表头的特效

    做了好几天的固定表头特效,总算是搞定了.先说明一下基本功能:我们在一个网页上浏览很多份表格数据的时候,肯定会碰到很多分不清表头,也分不清表 格是哪个的情况,这个时候我们就希望能有一种功能,就是我们再下 ...

  7. ant design 的Table组件固定表头时不对齐

    现在有一个表格,里面的列数是不固定的(可以重复写入数据),且列数行数都可能很多,就带来一个问题: 必须要固定表头,但是antd 的表格组件设置了固定表格 scroll={{x:1000,y:300}} ...

  8. table表格合并列中相同的内容

    方法一: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  9. 纯css实现table表格固定列和表头,中间横向滚动的思路-附案例

    最近做的后台管理系统要处理大量的表格 原项目是采用的for循环加拼接字符串的方式实现;导致js代码一大堆;各种单引号和双引号的嵌套;让人头疼;遂引入vue.js;用v-for做模板渲染;工作量顿时减轻 ...

随机推荐

  1. LeetCode算法题-Sum of Square Numbers(Java实现)

    这是悦乐书的第276次更新,第292篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第144题(顺位题号是633).给定一个非负整数c,判断是否存在两个整数a和b,使得a的 ...

  2. 谈谈当代大学生学习IT技术的必要性。

    21世纪,人类社会已经从工业时代全面进入信息化时代,IT技术的发展正在影响人类的日常生活.比如,外卖平台给人们的用餐提供了更多的选择,移动支付颠覆了传统的支付方式.网购使得人们的购物更加方便,真正做到 ...

  3. Linux VMware新添加网络适配器找不到配置文件问题

    VMware centos 新添加网卡没有识别,在做 Linux 实验时经常遇到需要双网卡的情况,VMware 新添加网卡后Linux是不会主动创建 ifcfg-eth* 文件的,重启服务器和重启网络 ...

  4. 云数据库PolarDB(一)

    一.出现的背景及PolarDB简介 阿里云,中国第一家拥有完整云计算能力的企业. 2015年,在计算界的奥运会Sort Benchmark中,阿里云计算100TB数据排序只用了不到7分钟,把Apach ...

  5. web框架开发-Django模型层(2)-多表操作

    很重要,都是精华 多表关系模型 一对一 一旦确定表关系是一对一,在两张表中的任意一张表中建立关联字段+Unique 一对多 一旦确定表关系是一对多,创建关联字段在多的表中 多对多 一旦确定表关系是多对 ...

  6. SQL 撤销索引、表以及数据库

    通过使用 DROP 语句,可以轻松地删除索引.表和数据库. SQL DROP INDEX 语句 我们可以使用 DROP INDEX 命令删除表格中的索引. 用于 Microsoft SQLJet (以 ...

  7. jquery.amaran jquery提示类使用

    <script src="ing/js/jquery-1.8.3.min.js"></script> <link rel="styleshe ...

  8. 苹果手机连接Wifi认证机制

    Wifi状态保持方法和nas设备 https://patents.google.com/patent/CN106793171A/zh 基于ios终端的离线wifi热点认证方法和认证系统 https:/ ...

  9. 菜鸟学习计划浅谈之Linux系统

    人这一生都是在不断地学习,不断地进步中度过的,刚开始学习任何一门知识的时候,我们都习惯性的称自己为菜鸟,觉得自己对这方面的知识欠缺,水平很low,我也是如此.但我擅长总结,对于自己学习的新知识,总结学 ...

  10. Spring boot整合ElasticSearch案例分享+bboss

    https://my.oschina.net/bboss/blog/1835601?tdsourcetag=s_pcqq_aiomsg 欢迎观看浏览