7

コンテンツに基づいてHTMLテーブルの高さを自動サイズ設定する方法はありますか?また、複数の行スパンを持つ隣接セルの隣のセル(または複数のセル)の場合。

たとえば、次のようなテーブルがある場合(右側のセルには、Rowspan = "2"があり、セルコンテンツの高さ= 600px、左側の各セルのセルコンテンツの高さ= 150px):

セルは均等に配置されます

セル自体が高さを自動サイズ設定したため、左側の2つのセルの同意の間にギャップがあります。私はそれをこのように見せたいです:

セルの高さをコンテンツに合わせて調整

一番上のセルがセルコンテンツの高さまで自動的に折りたたまれます。これを達成する方法はありますか?

4

4 に答える 4

2

これにより、セルの最後の行が正しい高さに設定されます(デモ)。

function grow(td) {
    var table, target, high, low, mid;

    td = $(td);
    table = td.closest('table');
    target = table.height();
    low = td.height();

    // find initial high
    high = low;
    while (table.height() <= target) {
        td.height(high *= 2);
    }

    // binary search!
    while (low + 1 < high) {
        mid = low + Math.floor((high - low) / 2);
        td.height(mid);
        if (table.height() > target) {
            high = mid;
        } else {
            low = mid;
        }
    }

    td.height(low);
}

$('tr:last-child td').each(function() { grow(this); });

これをプレーンなJavaScriptに変換するのは簡単なはずです。


更新:より複雑なテーブルの場合は、最後の行を次のように置き換えます(デモ):

$.each($('td').get().reverse(), function() { grow(this); });

grow()アイデアは、最後の行から始めて上に向かって、すべてのセルを呼び出すことです。

于 2012-06-12T21:36:49.037 に答える
1

テーブルid="mytable"を考慮すると、次のようになります。

    $("#mytable").find("td").each(function(){ 

    var ContentHeight = $($(this).html()).height();
    $(this).height(ContentHeight);

 });
于 2012-06-06T17:53:00.657 に答える
0

ページの最後にjavascriptコードを作成し、それを実行させます。

 <script type="text/javascript"> 
document.getElementById("idOfTd").style.height="100px";
</script>
于 2012-06-07T21:56:15.713 に答える
0

このように作成したほうがいいと思いますhttp://jsfiddle.net/miqdad/w9QYB/

于 2012-06-12T12:05:37.417 に答える