Need to make fixed width datatables responsive

Question

I have datatables used with twitter bootstrap in a container at the bottom of my page. The tables were responsive and adjusted with screen size, but I wanted to fix a few of the tables with fixed widths to make them smaller (in width). I fixed the widths of the table data with

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

however, by fixing the column and title widths, i cannot get the scrollbar responsive ability anymore when I make the screen smaller than the table width. Is it not possible to have a fixed width table and scrollbar? thanks!

Answer 1

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

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

Answer 2

I think css 3 media queries should help you or maybe consider using this bootstrap extension: http://themergency.com/footable/

With media queries you could write something like this:

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

This makes the table responsive again for a screenwidth lower then the given 768px.