テーブル内のフォントサイズを小さくしてdiv内にテーブルを収める

divよりも広いテーブルを持つ固定幅のdivがあります。私がしたいのは、div内に収まるようにテーブルテキストを縮小することです。テーブル内のフォントサイズを小さくしてdiv内にテーブルを収める

幅をパーセンテージとしてThis Pageに設定すると、表の幅を100％に設定できません。

次のコードは動作しますが、私はそれを自動化する、つまりFontSizeをどのように計算しますか？

<!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のテーブル内のCSSのフォントサイズに設定されている場合FontSizeは減少しますが、TabWidthは無限ループ – Holly

jsfiddleでサンプルをセットアップできますか？私はコードを書くときにだけchromeで試しましたが、通常はchromeで動作すればfirefoxでも動作するはずです。 –

テーブル内のフォントサイズを小さくしてdiv内にテーブルを収める

答えて

関連する問題