我正在尝试在表滚动here期间将thead固定在顶部,但没有任何结果。

我像这样通过JS尝试过,但是不起作用...

<script>
   document.getElementById("tablepress-10").addEventListener("scroll", function() {
    var translate = "translate(0," + this.scrollTop + "px)";
    this.querySelector("thead").style.transform = translate;
});
</script>


我也尝试过
JS

<script type="text/javascript">
    jQuery(document).ready(function($){
    var table = $("#tablepress-10");

    $(window).scroll(function() {
        var windowTop = $(window).scrollTop();

        if (windowTop > table.offset().top) {
            $("thead", table).addClass("Fixed").css("top", windowTop);
        }
        else {
            $("thead", table).removeClass("Fixed");
        }
    });
});
</script>


CSS:

#tablepress-10 thead.Fixed
{
    position: absolute;
}


编辑:我也尝试了这个与我们的结果

<script>
    jQuery(document).ready(function($){
// Change the selector if needed
var $table = $('table.tablepress-id-10'),
    $bodyCells = $table.find('tbody tr:first').children(),
    colWidth;

// Adjust the width of thead cells when window resizes
$(window).resize(function() {
    // Get the tbody columns width array
    colWidth = $bodyCells.map(function() {
        return $(this).width();
    }).get();

    // Set the width of thead columns
    $table.find('thead tr').children().each(function(i, v) {
        $(v).width(colWidth[i]);
    });
}).resize(); // Trigger resize handler
});
</script>


的CSS

有任何提示吗?

感谢您的建议:D

PS:我正在使用Wordpress。

最佳答案

可以给表主体加上overflow: sroll吗?
在stackoverflow的另一篇文章中对此进行了解释。
HTML table with 100% width, with vertical scroll inside tbody

关于javascript - 表:滚动期间修复thead,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38613650/

10-09 06:15