3

CSS を使用して固定ヘッダーを作成しました (主に固定するヘッドの位置を設定するだけです) が、ユーザーの解像度サイズまたはウィンドウ サイズがテーブル サイズよりも小さい場合、追加する必要があるという問題が発生します。すべてを表示できるように、水平スクロール バーに表示します。オーバーフローを自動でスクロールするように設定しようとしましたが、ページの一番下までスクロールしたときにのみスクロールバーが表示されます。また、テーブルと一緒にスレッドをスクロールできるようにする必要があります。ウィンドウがテーブル サイズよりも小さい場合に水平スクロール バーを表示する方法と、ウィンドウ サイズが小さすぎる場合に広告を 1 つの位置に固定し、スクロールしてより多くの広告を表示する方法についての提案はありますか?

http://jsfiddle.net/E9mqk/1/

HTML は次のとおりです。

<div class="table-wrapper">
<table id="table-information">
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <thead class="table-fixed-header" id="table-data">
        <tr>
            <th>Something 1</th>
            <th>Something 2</th>
            <th>Something 3</th>
            <th>Something 4</th>
            <th>Something 5</th>
            <th>Something 6</th>
            <th>Something 7</th>
            <th>Something 8</th>
        </tr>
    </thead>
    <tbody class="table-body">   
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
    </tbody>
</table>
</div>

CSS は次のとおりです。

.table-wrapper {
    overflow-x: scroll;
}
.table-fixed-header {
    position: fixed;
}
#table-information tbody:before {
    line-height: 30px;
    content:"-";
    color:white; /* to hide text */
    display:block;
}
#table-information td {
    max-width: 100px;
    min-width: 100px;
}
#table-information th {
    max-width: 100px;
    min-width: 100px;
}
4

1 に答える 1

1

テーブルで奇妙な動作を引き起こす Javascript で何かをしていないと仮定すると、テーブルを

 <div style="overflow-x: scroll;">
   [your table here]
 </div>

または同じスタイルの他のブロック要素を使用すると、ヘッドとボディが互いにスクロールするなど、求める動作が得られます。実際の例については、この jsfiddleを参照してください。

于 2013-03-20T19:47:50.097 に答える