需要使固定宽度的数据表具有响应性

Need to make fixed width datatables responsive

本文关键字：响应 数据表 固定宽度      更新时间：2024-02-20

我在页面底部的一个容器中有与twitter引导程序一起使用的数据表。这些桌子很有响应性，并根据屏幕大小进行了调整，但我想用固定的宽度固定一些桌子，使它们更小（宽度）。我用固定了表格数据的宽度

        var resizeTable1 = document.getElementById("myTable1");
        resizeTable1 .style.width = "1000px";
        $("#table1-tab").find('.dataTables_scrollHead').css('width','1000px');
        $("#table1-tab").find('.dataTables_scrollHeadInner').css('width','1000px');
        $('.column1').css('width','78px');
        $('.column2').css('width','305px');
        $('.column3').css('width','69px');
        $('.column4').css('width','69px');
        $('.column5').css('width','127px');
        $('.column6').css('width','127px');
        $('.column7').css('width','114px');
        $('.column8').css('width','115px');

然而，通过固定列和标题宽度，当我使屏幕小于表宽度时，我就无法再获得滚动条响应能力。难道不可能有一个固定宽度的表和滚动条吗？谢谢

如果您正在寻找滚动条，这对您有用吗？

$("#myTable1").css('overflow', 'auto');

我认为css 3媒体查询应该对您有所帮助，或者可以考虑使用这个引导程序扩展：http://themergency.com/footable/

有了媒体查询，你可以写这样的东西：

@media screen and (max-width: 768px) {
    #myTable1 {
        width: 100%;
    }
}

这使得表格再次对低于给定768px的屏幕宽度作出响应。

相关文章：