html - 行スパンが含まれる場合、コンテンツに基づいてHTMLテーブルのセルの高さを自動サイズ設定

Question

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

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

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

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

Answer 1

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

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()アイデアは、最後の行から始めて上に向かって、すべてのセルを呼び出すことです。

Answer 2

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

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

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

 });

Answer 3

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

 <script type="text/javascript"> 
document.getElementById("idOfTd").style.height="100px";
</script>

Answer 4

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