Utilisez js css html pour obtenir des en-têtes de colonnes de tableau fixes qui ne bougent pas

Pas grand chose à dire, jetons un oeil avec cet éditeur

1 CSS

<style type="text/css">
  #scroll_head {
    position: absolute;
    display: none;
  }
</style>

2. >

<script type="text/javascript">
  //该函数在上面一个table数据加载完成后调用
  //把表头的宽度设置到会滚动的页头去
  var copyWidth = function () {
    var b = $(&#39;#data_tbody&#39;).prev().find(&#39;tr:last&#39;).find(&#39;th&#39;);
    var c = $(&#39;#scroll_head&#39;).find(&#39;tr:last&#39;).find(&#39;th&#39;);
    for (var i = 0; i < b.length; i++) {
      var newWith = b.eq(i).width();
      if ($.browser.msie) {
        newWith += 1;
      }
      c.eq(i).width(newWith);
    }
  }
  $(function () {
    $(window).scroll(function () {
      if ($(&#39;#data_tbody&#39;).length > 0) {
        var thead = $(&#39;#data_tbody&#39;).prev();
        var thOffset = thead.offset();
        var scTop = $(window).scrollTop(); //滚动条相对top的位置
        if (scTop > thOffset.top) {  //滚动条滚到thead及以下的位置，用临时的thead代替显示
          $(&#39;#scroll_head&#39;).css(&#39;display&#39;, &#39;block&#39;);
          $(&#39;#scroll_head&#39;).offset({ top: scTop, left: thOffset.left });
        }
        else { //滚动条滚到thead上的位置，用table的原始thead显示
          $(&#39;#scroll_head&#39;).css(&#39;display&#39;, &#39;none&#39;);
        }
      }
    });
  });
</script>

3. Contenu HTML

<div id="data_div">
  <table>
    @*thead内容及样式同scroll_head中的thead*@
    @*thead使用深背景色，避免滚动时和tbody内容重叠显示*@
    <thead>
      <tr>
        @*一级标题*@
        <th class="tt1" colspan="2">一级1</th>
        <th class="tt2" colspan="5">一级2</th>
        <th class="tt3" colspan="6">一级3</th>
      </tr>
      <tr>
        @*二级标题*@
        <th style="width: 23px;">二级11</th>
        <th style="width: 36px;">二级12</th>
        <th class="tt" style="width: 40px;">二级21</th>
        <th class="tt" style="width: 30px;">二级22</th>
        <th class="tt" style="width: 30px;">二级23</th>
        <th class="tt" style="width: 30px;">二级23</th>
        <th class="tt" style="width: 30px;">二级24</th>
        <th class="tt" style="width: 30px;">二级25</th>
        <th class="tt" style="width: 30px;">二级31</th>
        <th class="tt" style="width: 30px;">二级32</th>
        <th class="tt" style="width: 30px;">二级33</th>
        <th class="tt" style="width: 30px;">二级33</th>
        <th class="tt" style="width: 30px;">二级34</th>
        <th class="tt" style="width: 30px;">二级35</th>
        <th class="tt" style="width: 30px;">二级36</th>
      </tr>
    </thead>
    <tbody id="data_tbody">
      数据内容，在数据加载完成后调用copyWidth()函数解决兼容性
    </tbody>
  </table>
</div>
<div id="scroll_head" style="display:block; top: 168px; left: 0px; position: relative;">
  <table width="100%">
    <thead> @*thead使用深背景色，避免滚动时和tbody内容重叠显示*@
      <tr>
        @*一级标题*@
        <th class="tt1" colspan="2">一级1</th>
        <th class="tt2" colspan="5">一级2</th>
        <th class="tt3" colspan="6">一级3</th>
      </tr>
      <tr>
        @*二级标题*@
        <th style="width: 23px;">二级11</th>
        <th style="width: 36px;">二级12</th>
        <th class="tt" style="width: 40px;">二级21</th>
        <th class="tt" style="width: 30px;">二级22</th>
        <th class="tt" style="width: 30px;">二级23</th>
        <th class="tt" style="width: 30px;">二级23</th>
        <th class="tt" style="width: 30px;">二级24</th>
        <th class="tt" style="width: 30px;">二级25</th>
        <th class="tt" style="width: 30px;">二级31</th>
        <th class="tt" style="width: 30px;">二级32</th>
        <th class="tt" style="width: 30px;">二级33</th>
        <th class="tt" style="width: 30px;">二级33</th>
        <th class="tt" style="width: 30px;">二级34</th>
        <th class="tt" style="width: 30px;">二级35</th>
        <th class="tt" style="width: 30px;">二级36</th>
      </tr>
    </thead>
  </table>
</div>

Ce qui précède est le contenu de cet article Tout le contenu, j'espère que le contenu de cet article pourra apporter de l'aide aux études ou au travail de chacun. Si vous avez des questions, vous pouvez laisser un message pour communiquer. J'espère également soutenir le site Web PHP chinois !

Pour plus d'articles sur l'utilisation de js css html pour obtenir des en-têtes de colonnes de tableau fixes, veuillez faire attention au site Web PHP chinois !