<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表头和第一列固定</title><style>*{padding: 0;margin: 0;}html,body{width: 100%;height: 100%;}.wrap{width: 100%;position: relative;}.box{width: 100%;overflow-x: auto;}.table{padding-top: 36px;}.table>thead{width: 100%;position: fixed;overflow: hidden;top: 0;left: 0;background-color: #fff;z-index: 98;}th,td{min-width: 85px;text-align: center;line-height: 36px;}.table>tbody tr>td:nth-of-type(2){padding-left: 85px;}.table>tbody tr>td:first-child{position: absolute;left: 0;background-color: #fff;z-index: 97;}.first_trh th:first-child{position: fixed;left: 0;top: 0;background-color: #fff;z-index: 99;}.first_trh th:nth-of-type(2){padding-left: 85px;}    </style>
</head>
<body>
<div class="wrap"><div class="box"><table class="table"><thead><tr class="first_trh"><th>行号头</th><th>TH002</th><th>TH003</th><th>TH004</th><th>TH005</th><th>TH006</th><th>TH007</th><th>TH008</th><th>TH009</th><th>TH010</th><th>TH011</th><th>TH012</th><th>TH013</th><th>TH014</th><th>TH015</th><th>TH016</th><th>TH017</th><th>TH018</th><th>TH019</th><th>TH020</th></tr></thead><tbody><tr><td>行号01</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号02</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号03</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号04</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号05</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号06</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号07</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号08</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号09</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号10</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号11</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号12</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号13</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号14</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号15</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号16</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号17</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号18</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号19</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号20</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号21</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号22</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号23</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号24</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号25</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号26</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号27</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号28</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号29</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号30</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号31</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号32</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号33</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号34</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号35</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号36</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号37</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号38</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号39</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号40</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号41</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号42</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号43</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号44</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号45</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号46</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号47</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号48</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号49</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr><tr><td>行号50</td><td>con001</td><td>con002</td><td>con003</td><td>con004</td><td>con005</td><td>con006</td><td>con007</td><td>con008</td><td>con009</td><td>con010</td><td>con011</td><td>con012</td><td>con013</td><td>con014</td><td>con015</td><td>con016</td><td>con017</td><td>con018</td><td>con019</td></tr></tbody></table></div>
</div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script type="text/javascript">$(window).resize(function () { //当浏览器大小变化时$('.table thead').width($('.box').width());$('.first_trh').width($('.table').width());
});
$('.box').on('scroll',function(){// 将thead头部和外部容器滚动条绑定，同步移动$('.table thead').scrollLeft($(this).scrollLeft());
});
/*
*  按下拖拽
*  ele 元素选择器 #id,.class*/
function sl_dragmove(ele){$(document).on('mousedown',ele,function(e_wrap){var _that = $(this);$(_that).css('cursor','move').css('user-select','none');$(this).mouseleave(function(e_c1){$(_that).unbind('mousemove');$(_that).css('cursor','default');});$(this).mouseup(function(e_c2){$(_that).unbind('mousemove');$(_that).css('cursor','default');});var original_left = $(_that).scrollLeft()+e_wrap.clientX;$(this).mousemove(function(e_c3){$(_that).scrollLeft(original_left-e_c3.clientX);});})
}
sl_dragmove('.box');</script>
</body>
</html>

html table 固定表头和列相关推荐

  1. el table 固定表头和首行_vue表格实现固定表头首列

    前言 最近在做vue移动端项目,需要做一个可以固定表头首列的表格,而且由于一些原因不能使用任何UI插件,网上找了很久也没什么好方法,所以在解决了问题之后,写下了这篇文章供后来人参考,文章有什么错漏的问 ...

  2. table固定表头和首列

    table固定表头和首列 html部分,结构上分为左右两部分,又分别拆开为上下两部分,总共四个结构部分,以下为固定首行和首列,需要固定多行多列的可以自行添加,如下列表中姓名为左上角固定不变的位置,可自 ...

  3. 纯CSS实现Table固定表头和首列

    Table固定表头和首列这种需求应该比较常见.以往的做法,需要写一大堆脚本,而现在,可以使用position:sticky轻松实现这个效果. .table-container {width: 100% ...

  4. element table固定表头，表的高度自适应解决方法

    element table固定表头,表的高度自适应解决方法 参考文章: (1)element table固定表头,表的高度自适应解决方法 (2)https://www.cnblogs.com/muou ...

  5. table固定表头滚动

    一.table固定表头滚动(不兼容IE)  使用scrollTop监听滚动   如下例 1.html <div class="tabflow" id="flowta ...

  6. table固定列html5,css+js简单实现table固定首行首列

    说明: 使用easyui等都可以实现table固定首行首列的功能. 但仅仅只需要这一个功能,完全可以用css+js简单实现而不用引入更多工具. 网上找到很多的思路,自己对其中比较简单的一个进行了整理. ...

  7. layui表格table固定表头第一行固定显示

    layui表格table固定表头第一行固定显示 代码示例如下: layui.use('table', function(){$ = layui.jquery;var table = layui.tab ...

  8. html纵向表头,HTML table固定表头

    最近尝试了几种HTML的table固定表头的方法..额...各有利弊,但很尴尬..... 1.thead和tbody的display设置为block; 这种可以实现,但是需要提前设置好每个th和td的 ...

  9. vue表格实现固定表头首列

    ​​​​​​​下载地址 vue表格实现固定表头首列 dd:

最新文章

  1. python list查找元素_使用python list 查找所有匹配元素的位置实例
  2. Java锁详解：“独享锁/共享锁+公平锁/非公平锁+乐观锁/悲观锁+线程锁”
  3. （七）Vue 项目规范
  4. 两个oracle数据库外网同步,利用DBLink+JOB实现两个Oracle数据库之间的数据同步
  5. Java和Go的GC差异
  6. Firefox 的使用（firefox 拓展应用程序）
  7. 如何避免重复性地做数据维护页面？
  8. jdbc、jpa、spring data jpa、hibernate、mybatis之间的关系及区别
  9. css的盒子模型以及布局（面试考点）
  10. W3CSchool.chm帮助文档百度网盘分享
  11. loacallhost：80被占用解决方法
  12. 计算机网络——计算机网络知识脑图
  13. 安装SAP HANA单机数据库
  14. Unity Graph View打造图形化对话编辑系统（三）
  15. “蔚小理”想挑战特斯拉？先干过比亚迪再说
  16. 如何判断一个点是否在多边形内？
  17. css3实现建筑物的旋转,CSS3实现旋转光环效果的实现步骤
  18. 网络游戏——强联网游戏
  19. 【安全】椭圆曲线加密算法(ECC)深入理解
  20. 用CreateToolhelp32Snapshot、Process32First、Process32Next枚举进程（BCB）

热门文章

  1. JAVA合并pdf，拆分pdf文档
  2. elasticsearch使用脚本 滚动关闭索引，更新index setting
  3. 阿里云添加管理员用户进行协作
  4. 线性回归分析中的哑变量
  5. 字符串中空格相关操作
  6. 关于安卓的通知栏 NotificationCompat
  7. Mysql 和 Oracle 的基本知识总结
  8. Spring Cloud之微服务概述
  9. Python数据分析上机
  10. 【Android 教程系列第 21 篇】如何查看安卓手机上支持哪些硬件和软件