Question

我在页面底部的容器中使用了与twitter bootstrap一起使用的数据表。这些表是响应式的，并根据屏幕大小进行调整，但我想修复一些具有固定宽度的表，以使它们更小（宽度）。我用

修复了表格数据的宽度

        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');

但是，通过修复列和标题宽度，当我使屏幕小于表格宽度时，我无法再获得滚动条响应能力。是不是可以有一个固定宽度的表和滚动条？谢谢！

Answer 1

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

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

Answer 2

我认为css 3 media queries可以帮助您或考虑使用此引导扩展程序：http://themergency.com/footable/

使用媒体查询，您可以编写如下内容：

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

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

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

2 个答案: