Question

抱歉我的英文！我想在滚动时修复表头。并滚动页面内容的其余部分。但是桌子的原始布局中断了。表列的宽度和行的大小不同。我无法解决它。带着敬意。

我的代码：

HTML

select date, count(*)
from SVNLogEntry
where repo = 'test' and date between '01/01/2011' and '01/01/2017'
group by date;

JS

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

CSS

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

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

固定头时引导滚动表中断

2 个答案: