固定磁头时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();
 }
});