減少表格中的字體大小，使表格適合格子

我有一個固定寬度的div，它的表格比div寬。我想要做的是縮小表格文字，使其適合div。減少表格中的字體大小，使表格適合格子

將寬度設置爲百分比根據This Page將表寬度設置爲100％不起作用。

下面的代碼將工作，但我如何自動化它，即計算字體大小？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <link rel="stylesheet" href=/themes/base/jquery.ui.all.css"> 
    <script src="/jquery-1.7.1.js"></script>  
    <script src="/ui/jquery.ui.core.js"></script>  
    <script src="/ui/jquery.ui.widget.js"></script>  
    <script src="/ui/jquery.ui.mouse.js"></script>  
<script src="/ui/jquery.ui.resizable.js"></script>  
<style> 
    #narrorColumn{ 
    width: 250px; 
    } 
</style> 

<script type="text/javascript"> 
function ShrinkTable(){ 
var FontSize = 6; 

function ShrinkTable(){ 
    var TabWidth = $("#tbl").width(); 
    var DivWidth= $("#narrowColumn"); 
    if (DivWidth <= TabWidth) 
    { 
     $("#tbl").css('font-size', FontSize); 
    } 
} 


</script> 

</head> 
<body onLoad="ShrinkTable()" > 
<div id = "narrorColumn" > 
<table id="tbl" border="10"> 
<thead> 
<tr> 
<th>First Column</th> 
<th>Second Column</th> 
<th>Third Column</th> 
<th>Forth Column</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>Some Random text here</td> 
<td>Some Random text here</td> 
<td>Some Random text here</td> 
<td>Some Random text here</td> 
</tr> 
<tr> 
<td>Mary Had a little lamb</td> 
<td>Mary Had a little lamb</td> 
<td>Mary Had a little lamb</td> 
<td>Mary Had a little lamb</td> 
</tr> 
<tr> 
<td>Humpty Dumpty sat on a wall</td> 
<td>Humpty Dumpty sat on a wall</td> 
<td>Humpty Dumpty sat on a wall</td> 
<td>Humpty Dumpty sat on a wall</td> 
</tr> 
<tr> 
<td>Hay diddle diddle the kat and the fiddle</td> 
<td>Hay diddle diddle the kat and the fiddle</td> 
<td>Hay diddle diddle the kat and the fiddle</td> 
<td>Hay diddle diddle the kat and the fiddle</td> 
</tr> 
</tbody> 
</table> 
</div> 
<div> <input type=button value="Make Big" onClick="$('#tbl').makeBig()"> 
</div> 
</body> 

</html>

來源

2012-05-08 Holly

hmm ...字體大小是6什麼？ 6px，6pt，6em？認爲你需要添加單位 – Rodolfo

我不認爲上面的代碼將工作。它有一些錯字錯誤。

我不確定這是否會影響性能很多，但我認爲您可以嘗試減小字體大小，直到表的大小小於表寬度。

請參見下面的代碼：

<div id = "narrorColumn" > 
<table id="tbl" border="10"> 
<thead> 
<tr> 
<th>First Column</th> 
<th>Second Column</th> 
<th>Third Column</th> 
<th>Forth Column</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>Some Random text here</td> 
<td>Some Random text here</td> 
<td>Some Random text here</td> 
<td>Some Random text here</td> 
</tr> 
<tr> 
<td>Mary Had a little lamb</td> 
<td>Mary Had a little lamb</td> 
<td>Mary Had a little lamb</td> 
<td>Mary Had a little lamb</td> 
</tr> 
<tr> 
<td>Humpty Dumpty sat on a wall</td> 
<td>Humpty Dumpty sat on a wall</td> 
<td>Humpty Dumpty sat on a wall</td> 
<td>Humpty Dumpty sat on a wall</td> 
</tr> 
<tr> 
<td>Hay diddle diddle the kat and the fiddle</td> 
<td>Hay diddle diddle the kat and the fiddle</td> 
<td>Hay diddle diddle the kat and the fiddle</td> 
<td>Hay diddle diddle the kat and the fiddle</td> 
</tr> 
</tbody> 
</table> 
</div> 
<div> <input type=button value="Make Big" onClick="$('#tbl').makeBig()"> 
</div>

CSS

#narrorColumn{ 
    width: 300px; /* You can play around with this width to test it */ 
    background-color:#ccc; 
} 

#tbl { 
width:100%; 
    font-size:55px; 
}

的JavaScript

function ShrinkTable() { 
    var FontSize = parseInt($("#tbl").css('font-size').replace('px', ''),10); 
    var TabWidth = $("#tbl").width(); 
    var DivWidth = $("#narrorColumn"); 
    /****REMOVED equal sign(=) ****/ 
    if (parseInt(DivWidth.css('width').replace('px', ''),10) < TabWidth) { 
     $("#tbl").css('font-size', FontSize - 4 + 'px'); /* you can change 4 with any number, the smaller is better but it may require more loop */ 
     //Shrink the font while div width is less than table width 
     ShrinkTable(); 
    } 
} 

$(document).ready(function() { 
    ShrinkTable(); 
});

我希望這回答你的問題。見jsfiddle here

來源

2012-05-08 18:07:48

Thanx非常工作一種待遇 – Holly

嗨似乎這隻適用於IE瀏覽器在Firefox中，如果字體大小已設置在表中的CSS，然後在代碼中FontSize減少，但TabWidth保持不變導致無盡的循環 – Holly

你可以在jsfiddle中設置樣本嗎？我只在編寫代碼時嘗試了chrome，但通常如果它在chrome上工作，它也應該在firefox上工作。 –

減少表格中的字體大小，使表格適合格子

回答

相關問題