HTML 表格缩放以适应
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26712180/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML table scale to fit
提问by RobAu
I have a KPI dashboard with a lot of small charts. One type of chart is in fact a HTML table. It is displayed in a DIV.
我有一个带有很多小图表的 KPI 仪表板。一种类型的图表实际上是 HTML 表格。它显示在 DIV 中。
<div style="width:400px; height:250px;overflow:hidden">
<table>
<tr><th>Col1</th><th>Col2</th></tr>
<tr><td>Row1</td><td>Row2</td></tr>
</table>
<div>
Currently, I hide the overflow. I would like to make the table 'fit' the div.
目前，我隐藏了溢出。我想让桌子“适合”div。
How can I make this tableto fit/scale down to the DIVif it would become too big to diplay? Ideally, the text would also shrink.
如果它变得太大而无法显示，我怎样才能使它table适合/缩小DIV？理想情况下，文本也会缩小。
采纳答案by RMo
This CSS will make your table have the same height/width as the container you are using. Borders/background are only added for visualising what happens.
此 CSS 将使您的表格与您使用的容器具有相同的高度/宽度。添加边框/背景仅用于可视化发生的情况。
Shrinking the text will however be far more challenging. There is probably no way without using javascript to achieve that. And even if you did, content might end up being unreadable because of a too small font-size.
然而，缩小文本将更具挑战性。如果不使用 javascript 来实现这一点，可能就没有办法。即使你这样做了，由于字体太小，内容最终可能会变得不可读。
I managed to come up with some javascript/jquery code to change the font-size until the table fits the div or the font-size reaches 5px (= unreadable). Of coarse you will need to edit some of it yourself (because it would apply on all tables if you don't change the selectors to id's)
我设法想出了一些 javascript/jquery 代码来更改字体大小，直到表格适合 div 或字体大小达到 5px（= 不可读）。粗略地说，您需要自己编辑其中的一些（因为如果您不将选择器更改为 id，它将适用于所有表）
table{
width: 100%;
background-color: red;
}
th, td{
width: 50%;
border: blue solid 1px;
}
Jquery / Javascript
jQuery / Javascript
$(document).ready(function () {
var HeightDiv = $("div").height();
var HeightTable = $("table").height();
if (HeightTable > HeightDiv) {
var FontSizeTable = parseInt($("table").css("font-size"), 10);
while (HeightTable > HeightDiv && FontSizeTable > 5) {
FontSizeTable--;
$("table").css("font-size", FontSizeTable);
HeightTable = $("table").height();
}
}
});
回答by RobAu
Here is what I use currently, it is embedded in a project (see for example the classes), but feel free to use it as inspiration.
这是我目前使用的，它嵌入在一个项目中（例如参见类），但可以随意使用它作为灵感。
scaleTable = function (markupId) {
//This hacky stuff is used because the table is invisible in IE.
function realWidth(obj){
var clone = obj.clone();
clone.css("visibility","hidden");
$('body').append(clone);
var width = clone.outerWidth();
clone.remove();
return width;
}
function realHeight(obj){
var clone = obj.clone();
clone.css("visibility","hidden");
$('body').append(clone);
var height = clone.outerHeight();
clone.remove();
return height;
}
var table = $("#"+markupId+" table:first-of-type");
var tablecontainer = $("#"+markupId).parents( ".scalabletablecontainer" );
var scalex = tablecontainer.innerWidth() / realWidth(table);
var scaley = tablecontainer.innerHeight() / realHeight(table);
var scale = Math.min(scalex, scaley);
if (scale<1.0) {
var fontsize = 12.0 * scale;
var padding = 5.0 * scale;
$("#"+markupId+" table tbody").css("font-size", fontsize + "px");
$("#"+markupId+" table tbody TD").css("padding",padding + "px");
$("#"+markupId+" table TH").css("padding",padding + "px");
}
};
回答by Roland
Get table and div dimensions as shown in the previous comments. Then apply css
获取表和 div 尺寸，如前面的评论所示。然后应用css
transfrom:scale(factorX, factorY)
to the table.
到桌子上。
