1

最初の列とヘッダー（複数の行がある）をフリーズするために非常に多くのソリューションを試しましたが、すべてのソリューションでカスタムcss（ソリューションに応じたcss）を使用する必要があります。

私の場合、以前の css を変更できません。divスクロールでテーブルをフリーズできるコードが必要です(これは動的です)。

解決策を提供してください。

4

3 に答える 3

0

私がコメットjqueryとcssを使用するものを達成するために。ここにプラグイン：リンク

これは、テーブルの行と列をスクロールしないようにする jQuery プラグインです。

特定の HTML テーブル オブジェクトを取得し、特定の数の列または行、またはその両方を固定して、固定された列または行がスクロールしないように設定できます。

固定する行は、テーブル ヘッド セクションに配置する必要があります。

colspan または rowspan 属性を使用して組み合わせた行と列を固定することもできます。

于 2016-10-11T18:00:15.993 に答える
0

私はこれを次のようにしました：

<table style="table-layout: fixed">
    <tr>
        <td><div style="width:100px; position:fixed;">Frozen Header text</div></td>
    </tr>
    <tr>
        <td>Some data</td>
    </tr>
<table>

最初の列を固定する方法もわかりませんが、次のように、<col>タグを使用してフォーマットするだけでなく、同じ戦略を使用できると思います。

<col style="width:100px; position:fixed;" />

それを試してみて、どうなるか教えてください。

于 2012-05-16T06:06:17.343 に答える
-3

修正ヘッダーは比較的単純で実装が簡単です。列は別のものです。

例えば：

<table>
  <tr class="header"><td>header</td></tr>
  <tr><td>body</td></tr>
</table>

onscroll イベントを監視し、ヘッダーが表示されていないかどうかを検出する必要があります。ビューの外にある場合は、getBoundingClientRect() を使用して、tr.header のサイズ パラメータ (内部に TD も含む) とその clientX と clientY を取得します。cloneElement(true) を使用して tr.header のクローンを作成し、同じテーブルに配置します。次に、サイズ パラメータをその TD に割り当て、この複製された要素を画面に固定します。

このソリューションは、実際には複雑ですが、テーブルのスタイルやレイアウトには影響しません。

于 2012-05-16T06:17:49.120 に答える