Jquery 减少表格中的字体大小,使表格适合于div
我有一个固定宽度的div,它有一个比div宽的表。 我想做的是缩小表格文本,使其适合div 根据将表格宽度设置为100%将宽度设置为百分比不起作用 下面的代码可以工作,但我如何自动计算字体大小Jquery 减少表格中的字体大小,使表格适合于div,jquery,Jquery,我有一个固定宽度的div,它有一个比div宽的表。 我想做的是缩小表格文本,使其适合div 根据将表格宽度设置为100%将宽度设置为百分比不起作用 下面的代码可以工作,但我如何自动计算字体大小 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w
<!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>
我认为上面的代码行不通。
它有一些打字错误
我不确定这是否会对性能造成很大影响,但我认为您可以尝试减小字体大小,直到表格大小小于表格宽度
见以下代码:
<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>
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();
});
函数收缩表(){
var FontSize=parseInt($(“#tbl”).css('font-size')。替换('px',''),10);
var TabWidth=$(“#tbl”).width();
var DivWidth=$(“#反射列”);
/****删除等号(=)****/
if(parseInt(DivWidth.css('width').replace('px',''),10)
我希望它能回答你的问题。请参见jsfiddlehmm。。。字体大小是6什么?6px,6pt,6em?您认为需要添加unitHi这似乎只适用于Firefox中的IE如果在css中为表格设置了字体大小,那么在代码中FontSize会减小,但TabWidth保持不变,从而导致无休止的循环。您可以在JSFIDLE中设置示例吗?我只是在编写代码时才尝试使用chrome,但通常情况下,如果它在chrome上工作,它也应该在firefox上工作。我刚刚在FF12.0中打开了你的小提琴&IE中的桌子仍然很大,它会缩小。
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();
});