1

並べ替え、サイズ変更/移動可能な列、および固定ヘッダー行を可能にするために作成したhtmlテーブルがあります。固定ヘッダーにより、ヘッダーセルとそれに対応するコンテンツセルが切断されたため、サイズを変更してもその列<th>のはサイズ変更されませんでした。<td>'s回避策として、サイズ変更<td>時に関連する要素のコンテンツの幅を手動で変更するコードを追加しました。<th>ほとんどの場合は正常に機能しているように見えますが、それでも列の幅が正確に一致しない場合があります。一時的な中断の1つで、chrome devツールを使用してhtmlを調べました。両方のスタイルwidthは同じですが、実際の幅（$（elt）.width（）によって返される）は、指定された幅より3px小さくなりました。のために<th><td><th>。誰かがこれを引き起こす可能性があることを知っていますか？

編集：これは、テーブルの合計幅が親divよりも大きくなるように列のサイズを変更した場合にのみ発生することに気付きました。コンテンツセルがオーバーフローし、水平方向にスクロールできるようになり<thead>ますが、固定幅のままで、一部の<th>要素を小さく調整して補正します。

CSS：

.blotter {
    overflow-y: hidden;
    overflow-x: auto;
    position: relative;
    border-left: solid thin silver;
}

.blotter-table {
    table-layout: fixed;
    margin-bottom: -1px;
}

tbody {
    height: 400px;
    max-height: 400px; 
    overflow: auto;
}

thead>tr,tbody {
    display: block;
}

td>div {
    overflow: hidden;
}

マークアップ：

<div class="blotter">
    <table class="table table-bordered table-hover table-condensed blotter-table">
        <thead>
            <tr>
                <th id="tradeaggregation_numTrades" draggable="true" style="width: 422px; cursor: pointer; opacity: 1;"># Trades<img src="resources/img/down_arrow.png" class="pull-right" id="imgSort" style="opacity: 1; cursor: e-resize;"></th>
                <th id="tradeaggregation_listValues" draggable="true" style="width: 305px; cursor: pointer; opacity: 1;">List Values</th>
                <th id="tradeaggregation_mgmtId" draggable="true" style="width: 66px; opacity: 1; cursor: e-resize;">mgmtId</th>
                <th id="tradeaggregation_sizeSum" draggable="true" style="width: 78px; cursor: pointer; opacity: 1;">Size Sum</th>      
            </tr>
        </thead>
        <tbody>         
            <tr id="tradeaggregation0">             
                    <td><div id="tradeaggregation0_0" style="overflow: hidden; width: 422px;">8,113</div></td>              
                    <td><div id="tradeaggregation0_1" style="overflow: hidden; width: 305px;">4RAJA-SUN null </div></td>                    
                    <td><div id="tradeaggregation0_2" style="overflow: hidden; width: 66px;">10,831,124,369</div></td>                  
                    <td><div id="tradeaggregation0_3" style="overflow: hidden; width: 78px;">19,048,548</div></td>                  
            </tr>
        </tbody>
    </table>
</div>
4

1 に答える 1

0

最初に、私が探していた動作を正確に明確にしましょう。固定されたスレッドを持ちながら、tbody オーバーフローを垂直方向にスクロールできるテーブルが必要でした。さらに、列のサイズを変更できます。列の合計サイズが原因でテーブルが親コンテナーよりも広くなる場合は、親の幅の制限内に収まるように列幅を調整するのではなく、オーバーフローを水平方向にスクロール可能にする必要があります。そうは言っても、上記のマークアップ/cssを使用してそれを達成しましたがtable、列の合計幅が表示領域よりも大きくなるように列のサイズが変更されたときに、javascriptを使用して明示的に幅を増やしました。

var cols = this.$el.find("tbody>tr:first td");
var newWidth = 1;
for ( var i = 0; i < cols.length; i++) {
    newWidth += $(cols[i])[0].offsetWidth;
}
var minWidth = $(this.$el.find(".blotter")[0]).width(); // parent div
if (newWidth < minWidth) newWidth = minWidth;
this.$el.find("table").width(newWidth);
于 2012-12-14T17:52:41.610 に答える