Bootstrap滾動表中斷時修復頭

對不起，我的英語！我想在滾動時修復表頭。剩下的頁面內容將滾動。但表格的原始佈局打破了。表格列和行的寬度不同。我無法修復它。帶着敬意。Bootstrap滾動表中斷時修復頭

我的代碼：

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>

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

CSS

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

來源

2016-05-13 gamernnov

可能是[引導4臺固定的一些標籤關閉問題 –

可能的複製頭和滾動表體不會讓tbody滾動]（https://stackoverflow.com/qu estions/42483320/bootstrap-4-table-with-fixed-header-and-scrolling-table-body-doesnt-let-tbody-s） –

試試這個標籤，讓我知道結果

<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>

來源

2016-05-13 12:39:04

抱歉:)代碼有一個標籤

– gamernnov

您可以實現使用此：

<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(); 
} 
});

來源

2016-05-13 12:39:07

相關問題

Bootstrap滾動表中斷時修復頭

回答

相關問題