Bootstrap滚动表中断时修复头

Question

对不起，我的英语！我想在滚动时修复表头。剩下的页面内容将滚动。但表格的原始布局打破了。表格列和行的宽度不同。我无法修复它。带着敬意。

我的代码：

HTML

<section class="scrollable padder"> 
<table class="table table-striped m-b-none text-sm m-t"> 
<thead class="ff"> 
<tr> 
    <th >1col</th> 
    <th >2col</th> 
</tr> 
</thead> 
<tbody> 
    <tr> 
     <td class="new_td">field1</td> 
     <td class="new_td">field2</td> 
    </td> 
</tbody> 
</table> 
</section> 

JS

$(".padder").scroll(function() { 
    if ($(".padder").scrollTop() > 100) { 
      $('.ff').addClass('fixed'); 
      } 
      else 
    { 
    $('.ff').removeClass('fixed'); 
    } 
    }); 

CSS

.fixed{  
    position:fixed; 
    top:50px; 
} 

Answer 1

试试这个标签，让我知道结果

<section class="scrollable padder"> 
    <table class="table table-striped m-b-none text-sm m-t"> 
    <thead class="ff"> 
    <tr> 
     <th >1col</th> 
     <th >2col</th> 
    </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td class="new_td">field1</td> 
      <td class="new_td">field2</td> 
     </tr> 
    </tbody> 
    </table> 
    </section> 

Answer 2

您可以实现使用此：

<table id="fixed"></table> 

的CSS

#fixed { 
position: fixed; 
top: 0px; display:none; 
background-color:white; 
} 

的js

var $fix= $(".table > thead").clone(); 
var $hfxd = $("#fixed").append($fix); 
$(".padder").scroll(function() { 
if ($(".padder").scrollTop() > 100 && $fix.is(":hidden")) 
{ 
    $hfxd.show(); 
} 
else 
{ 
$hfxd.hide(); 
} 
}); 

Answer 3

您可以实现使用此：

<table id="fixed"></table> 

的CSS

#fixed { 
position: fixed; 
top: 0px; display:none; 
background-color:white; 
} 

的js

var $fix= $(".table > thead").clone(); 
var $hfxd = $("#fixed").append($fix); 
$(".padder").scroll(function() { 
if ($(".padder").scrollTop() > 100 && $fix.is(":hidden")) 
{ 
    $hfxd.show(); 
} 
else 
{ 
$hfxd.hide(); 
} 
});