1

好的，有成功的代码可以td在页面加载时将表格中的元素大小调整为用户屏幕的百分比，如下所示：

jQuery(document).ready(function($){
    var xWidth = $(window).width();
    $("td.tablecol_0").animate({ 
        width: (xWidth * (15 / 100)) + 'px',
        minWidth: (xWidth * (15 / 100)) + 'px',
        maxWidth: (xWidth * (15 / 100)) + 'px'}, 1000);
    $("td.tablecol_1").animate({ 
        width: (xWidth * (35 / 100)) + 'px',
        minWidth: (xWidth * (35 / 100)) + 'px',
        maxWidth: (xWidth * (35 / 100)) + 'px'}, 1000);
    $("td.tablecol_2").animate({ 
        width: (xWidth * (15 / 100)) + 'px',
        minWidth: (xWidth * (15 / 100)) + 'px',
        maxWidth: (xWidth * (15 / 100)) + 'px'}, 1000);
});

因此，这根据窗口宽度起作用：15%、35% 和 15%（对于 3 列）。效果很好。但是，我想让它的内部内容也调整大小......就像它里面的所有元素一样。我希望他们相应地调整大小。

如何使用上面的以下代码在 jQuery 中快速轻松地做到这一点？

4

1 回答 1

0

只需将font-size属性设置为某个percent值，就像，

table{ font-size:50% }

使用jQuery你可以这样做，

$('table').css('font-size', '100%')

或者

$('table').css('font-size', '70%')

或单独为td

$("td.tablecol_0").animate({ 
    'width' : (xWidth * (15 / 100)) + 'px',
    'minWidth' : (xWidth * (15 / 100)) + 'px',
    'maxWidth' : (xWidth * (15 / 100)) + 'px',
    'fontSize' : (xWidth * (15 / 100)) + '%'
}, 1000);

如果你设置100%为 alltds那么你可以简单地使用$(table ).css('fontSize', '100%')。

演示。

于 2013-03-04T01:38:28.600 回答