需要使固定寬度的數據表響應

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 媒體查詢應該對您有所幫助，或者可以考慮使用此引導擴展程序： http : //themergency.com/footable/

使用媒體查詢，您可以編寫如下內容：

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

這使表再次響應屏幕寬度小於給定的768px。