我试图在Bootstrap内响应地调整表格.7000工作得很好,甚至我的桌子工作也很好.我遇到的问题是,当调整视图端口大小(无论是桌面窗口,还是通过手机屏幕呈现页面)时,表格不会以任何合理的方式调整大小.它确实调整大小但不相对于其原始位置.它缩小到位并且与页面上的其他元素一起丢失其边距位置.

你可以看到我已经尝试了许多由注释部分表示的不同方法.我已经倾倒了至少40个浏览器标签,寻找可行的解决方案.有一些我缺少的东西,非常感谢正确的方向.

我需要做些什么才能减少这个边距,以便桌子保持顶部和左侧对着它上面的内容和视口左墙？

See my answer below for the solution for both transformation and maximise issue.

我正在使用的不完整的jquery代码：

$(window).resize(function()
{
    var ww = $(window).width();
    var hh = $(window).height();
    var tt = $(".gaMetable").width();

    var scle = 0.0;//parseFloat(tt) / parseFloat(ww);

    if (ww <= 688);
    {
        scle = parseFloat(ww) / parseFloat(tt);
        //$(".gaMetable").css("transform","scale(" + scle.toString().substr(0,4) + ")");
        $('.gaMetable').css({
          '-webkit-transform' : 'scale(' + scle.toString().substr(0,4) + ')','-moz-transform'    : 'scale(' + scle.toString().substr(0,'-ms-transform'     : 'scale(' + scle.toString().substr(0,'-o-transform'      : 'scale(' + scle.toString().substr(0,'transform'         : 'scale(' + scle.toString().substr(0,4) + ')'
        });
    }

    $(".log").html($(".log").html() + scle.toString().substr(0,4) + "<BR>");

//    $(".gaMetable").width($(".gamerow").css("width"));
//    $(".gaMetable").height($(".gamerow").css("width"));

//    $(".gaMetable").css("transform","scale(0.75)");

    $(".gaMetable").css("position","relative");
    $(".gaMetable").css("top","0");
    $(".gaMetable").css("left","0");
    $(".gaMetable").css("padding","0");
//
//    $(".gamediv").css("position","relative");
//    $(".gamediv").css("top","0px");
//    $(".gamediv").css("left","0px");
//    $(".gamediv").css("padding","0px");

});

可以在下面的图片中找到所述行为的精确描述：

当窗口和电路板宽度相同时,表格位于屏幕左侧：688px.

但是当使用上面的代码时,表会缩小但不会保持位置.这是我的问题.如何让它没有保证金？

让我们重申一下.当我使用上面的变换方法缩小表时,它会在表的顶部和左侧创建一个不合需要的边距.我需要做些什么才能减少这个边距,以便桌子保持顶部和左侧对着它上面的内容和视口左墙？