5

動的コンテンツを含む並べ替え可能なテーブルを使用して、会社の HR モジュールを構築しています。プロジェクトが終了した後、クライアントはテーブルを垂直方向にサイズ変更できるようにするように要求しました。メインテーブルがラップされている div にjQuery UI resizable()を適用しました。SafariとChromeではまったく問題なく動作しますが、Firefox または IE でラッパー div のサイズを変更すると、テーブルの高さは同じままで、div のサイズに拡張されません。

簡略化されたマークアップは次のようになります。

<div id="list">
    <div class="table-container">
        <table>
            (blablabla, this is a sortable table with clickable th's and about 10 columns)
        </table>
    </div>
</div>

スタイルは次のとおりです。

#list {
    width: 1150px;
    height: 180px;
    float: left;
    overflow: hidden;
    border: 1px solid #aeaeae;
}

#list .table-container {
    width: 1145px;
    height: 175px;
}

#list table {
    width: 100%;
    height: 100%;
    float: left;
}

#list table td {
    height: 20px;
    vertical-align: middle;
}

各要素にさまざまなoverflow、position、およびdisplay値を使用してみましたが、結果は良くありませんでした。jQuery の部分は次のとおりです。

$(document).ready(function() {
    $("#list .table-container").resizable({ alsoResize: "#list", handles: "s" });
});

本当に Firefox/IE でこのような問題があるのでしょうか、それとも何か間違っているのでしょうか?

4

1 に答える 1

0

Firefox 9.0.1 でコードをテストしました。問題が見つかりませんでした。

divのサイズが変更されると、テーブルの高さが変わりました。

Firefox、IE、およびクロムでテーブルのサイズが適切に変更されることがわかりました。

FFでもIEでも問題ないと思います。コード内の他の何かがそれに影響していると思います。

于 2012-01-15T08:30:09.607 に答える