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%allを設定した場合tdsは、単純に$(tableを使用できます).css('fontSize', '100%')。

デモ。

于 2013-03-04T01:38:28.600 に答える