0

2 つのフレックス テーブルを使用しています。1 つはヘッダー用、もう 1 つはデータ用です。
データ用のものは、スクロール パネルでラップされます。
列のサイズはパーセンテージで表示され、ここから問題が始まります
。両方のテーブルの幅を 100% に設定します。
問題は、スクロールバーが常に表示されているとは限らないことです。必要な場合にのみ表示されます。
そのため、スクロールバーが表示されると、ヘッダーの幅とスクロールパネル内のデータ領域の幅の間にギャップがあります。(スクロールバー自体の幅が 16px であるため)
この方法では、列のタイトルがデータ列と正確に一致しません。

助言がありますか？
前もって感謝します！

4

3 に答える 3

0

複雑なコードとレイアウトを回避するこの種の一般的なトリックは、最後の列を除くすべての列の幅を単純に修正することです。最後の列は自動調整されるため、スクロールバーについてまったく心配する必要はありません。

これは、私が何を意味するかを示すために、jsfiddle のサンプルとサンプルの html/css です。注意点は、最後の列を除いて、すべての列に幅が必要です (パーセンテージにすることはできません)。

jsfiddle の例

CSS:

.container {
    width: 500px;
    border: 1px solid red;
}

.content-wrapper {
    overflow: auto;
    height: 75px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

col {
    width: 100px;
}

col:last-child {
    width: auto;
}

.container td {
    border: 1px solid green;
}

HTML:

<div class="container">
    <div class="header-wrapper">
        <table class="header">
            <colgroup>
                <col/>
                <col/>
                <col/>
                <col/>
                <col/>
            </colgroup>
            <tr>
                <td>Column A</td>
                <td>Column B</td>
                <td>Column C</td>
                <td>Column D</td>
                <td>Column E</td>
            </tr>
        </table>
    </div>
    <div class="content-wrapper">
        <table class="content">
            <colgroup>
                <col/>
                <col/>
                <col/>
                <col/>
                <col/>
            </colgroup>
            <tr>
                <td>Row 1/A</td>
                <td>Row 1/B</td>
                <td>Row 1/C</td>
                <td>Row 1/D</td>
                <td>Row 1/E</td>
            </tr>
            <tr>
                <td>Row 2/A</td>
                <td>Row 2/B</td>
                <td>Row 2/C</td>
                <td>Row 2/D</td>
                <td>Row 2/E</td>
            </tr>
            <tr>
                <td>Row 3/A</td>
                <td>Row 3/B</td>
                <td>Row 3/C</td>
                <td>Row 3/D</td>
                <td>Row 3/E</td>
            </tr>
            <tr>
                <td>Row 4/A</td>
                <td>Row 4/B</td>
                <td>Row 4/C</td>
                <td>Row 4/D</td>
                <td>Row 4/E</td>
            </tr>
            <tr>
                <td>Row 5/A</td>
                <td>Row 5/B</td>
                <td>Row 5/C</td>
                <td>Row 5/D</td>
                <td>Row 5/E</td>
            </tr>
        </table>
    </div
</div>
于 2013-07-29T01:31:43.610 に答える
0

列の同期を保つためにできることはたくさんありますが、それらのほとんどは、アクティブなレイアウトおよび/またはプレビューのサイズ変更イベントを必要とします。

あなたのユースケースでは、次のいずれかよりもはるかに単純で（パフォーマンスに関して）はるかに高速であると思います。

  • 両方のテーブルを少し縮小して、常にスクロールバーのスペースを確保します (またはスクロールバーをまったく削除して、スクロール動作の機能を維持します)。両方のソリューションは、通常、ネストされた のペアを使用して実現されdivます。
  • オーバーフローしてもコンテンツが縮小しないパネルに 2 番目のテーブルをラップします。CustomScrollPanelGWT では、 (代わりに)を使用してネイティブにそれを行うことができますScrollPanel。コンテナの中断されたチェーンまたは明示的なサイズRequiresResizeのいずれかが必要なパネルであることに注意してください。ProvidesResize

補足: クロス ブラウザー ソリューションでネイティブ スクロールバーのサイズを計算する必要がある場合は、AbstractNativeScrollbar.getNativeScrollbarHeight()(および/または幅のもの) を使用してください。

于 2013-07-28T11:00:37.377 に答える