有关所述问题的尝试和图片的文档:
我试图在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) + "
");
// $(".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.
但是当使用上面的代码时,表会缩小但不会保持位置.这是我的问题.如何让它没有保证金?
让我们重申一下.当我使用上面的变换方法缩小表时,它会在表的顶部和左侧创建一个不合需要的边距.我需要做些什么才能减少这个边距,以便桌子保持顶部和左侧对着它上面的内容和视口左墙?