减小表格中的字体大小，使表格适合 div答案

【问题标题】：Reducing font size in table so the table fits inside a div减小表格中的字体大小，使表格适合 div
【发布时间】：2012-05-17 05:05:15
【问题描述】：

我有一个固定宽度的 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>

【问题讨论】：

hmm... 字体大小是 6 什么？ 6px、6pt、6em？认为您需要添加单位

标签： jquery

【解决方案1】：

我认为上面的代码行不通。它有一些拼写错误。

我不确定这是否会对性能产生很大影响，但我认为您可以尝试减小字体大小，直到表格大小小于表格宽度。

见以下代码：

<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

【讨论】：

嗨，这似乎只适用于 IE 在 Firefox 中，如果在 css 中为表格设置了字体大小，那么在代码中 FontSize 减小但 TabWidth 保持不变，导致无限循环
你能在 jsfiddle 中设置示例吗？我只在编写代码时尝试使用 chrome，但通常如果它适用于 chrome，它也应该适用于 firefox。
我刚刚在 FF 12.0 中打开了您的小提琴，并且在 IE 中的表格仍然很大，它缩小了。