테이블의 글꼴 크기를 줄이면 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

음 ... 글꼴 크기는 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; 
}

자바 스크립트

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

고맙습니다 대단히 치료를했는데 – Holly

안녕하세요 이것은 Internet Explorer에서만 작동합니다 Firefox에서 font-size가 CSS의 표에 CSS로 설정되어 있으면 FontSize가 줄어들지 만 TabWidth는 끝없이 계속됩니다. 루프 – Holly

jsfiddle에서 샘플을 설정할 수 있습니까? 나는 크롬에서 코드를 작성할 때만 시도했지만 크롬에서 작동하면 파이어 폭스에서도 작동해야합니다. –

테이블의 글꼴 크기를 줄이면 div 내에 테이블이 나타납니다.

답변

관련 문제