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

【问题标题】：Need to make fixed width datatables responsive需要使固定宽度的数据表响应
【发布时间】：2013-12-02 20:56:28
【问题描述】：

我在页面底部的容器中有与 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');

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

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

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

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

【讨论】：

感谢您的回复，但不幸的是，这无济于事。表格是在屏幕上动态生成的。当我添加该行并调整它的大小时，容器的大小会正确调整，但表格本身不是......

【解决方案2】：

我认为 css 3 media queries 应该可以帮助您或者考虑使用这个引导扩展：http://themergency.com/footable/

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

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

这会使表格再次响应低于给定 768 像素的屏幕宽度。

【讨论】：

感谢您的回复！我确信使用某种额外的插件/扩展会有所帮助，但我觉得有一个简单的 jquery / css 解决方案我只是忽略了......工作区相当复杂，最好找到一个简单的1-3 行修复...
在我看来，那将是使用 css3/media 查询。