1

CSSを参照するときに何と呼ばれるかはわかりませんが、Excelでは、ペイン（ヘッダー行など）をフリーズして、下にスクロールしても、表示しているデータの列見出しを表示できます。私のWebページには、グリッドのようなデータがあります。そのデータを保持するために使用できるものはありますか、それとも2つの別々のテーブルを作成し、1番目と2番目のテーブルの配置を揃える作業を行う必要がありますか？

私はjQueryプラグインを開いているか、古いjsソリューションも計画しています。

支援するためにいくつかのコードを追加しました：

<table border="1" class="usertablex" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>City</th>
        </tr>
        </thead>
    <tbody style="height:20px;overflow:scroll;">
        <tr class="subtext">
            <td class="Dwidth175">John Silva</td>
            <td class="Dwidth80" align="center" > New York</td>
        </tr>
        <tr class="subtext">
            <td class="Dwidth175">John Thomas</td>
            <td class="Dwidth80" align="center" > New York</td>
        </tr>
        <tr class="subtext">
            <td class="Dwidth175">Xris</td>
            <td class="Dwidth80" align="center" > New York</td>
        </tr>
        <tr class="subtext">
            <td class="Dwidth175">Bob Denver</td>
            <td class="Dwidth80" align="center" > New York</td>
        </tr>
    </tbody>
</table>
4

6 に答える 6

2

ヘッダーを に、theadデータを に配置しtbody、 の固定高さを定義して、プロパティをtbody追加します。overflow:scroll十分なはずです。

于 2012-09-13T22:11:33.230 に答える
2

以下は、 Pure CSS Scrollable Table with Fixed Headerという作業例です。tbody要素をdisplay:block、に設定し、特定の高さoverflow:autoを追加することで機能します。tbody

編集: Firefox と Chrome で動作しますが、IE7、8、9 では元の方法のサポートが壊れているようです。この<tbody style="display:block; overflow:auto"/>トリックは対象のブラウザーでは機能しないため、「table-layout:fixed」を使用して 2 つのテーブルを使用して列幅を固定するか、1 つのテーブルを 2 つに分割するプラグインを見つける必要があると思いますそれと同じように自動的に (おそらく IE7+ の場合だけ)。

于 2012-09-13T22:13:59.123 に答える
1

position: fixed;cssセレクターを試してみてください

于 2012-09-13T22:10:57.440 に答える
1

ヘッダーの周りに div を配置すると、それに css を与えることができます

.divname
{
    position:fixed
    top:0;
}

画面上部の所定の位置に留まります。

于 2012-09-13T22:11:46.847 に答える
0

すべての提案に感謝しますが、これは私が必要としているものにより適していることがわかりました.

http://www.farinspace.com/jquery-scrollable-table-plugin/

于 2012-09-19T14:20:56.000 に答える
0

OS X の IE8 と Chrome でこれをテストしました。ただし、このソリューションにはいくつかの欠点があり、他のブラウザーではさらに調整が必要になる場合がありますが、これは役立つと思います。たとえば、テーブルの幅は固定である必要があります。幅を柔軟にするには、ウィンドウのサイズが変更されたときに幅を設定するために追加の JS を追加する必要があると思います。

基本的な考え方は、テーブルを 2 つのdiv でラップし (position: relative;外側の div を設定)、内側の div を で囲み、クローンを作成して左上に配置するというものです。overflow: auto;heighttheadposition: absolute;

http://jsfiddle.net/ZDeDw/2/

誰でもそれをフォークして改善することができます - それについてコメントを残してください。

于 2012-09-14T23:48:37.853 に答える