javascript - 修复头部时 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>