問題タブ [fixed-header-tables]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - 複数の ID テーブルの Javascript を変更する
このコードCODE Hereを使用してヘッダー テーブルを修正しようとしまし たが、実際のテーブル ID は次のとおりです。
では、それを使用するようにJavascriptを変更するにはどうすればよいですか?
jquery - ソート後にangular fixed-table-header.jsが正しく配置されない
私はデフォルトで正常に動作しているfixed-table-header.min.jsを使用していますが、ソート（サーバー側のソート）を実行した後、グリッドの配置が失われます。私はヘッダーを意味し、tbody はインラインではありません。何か助けはありますか？
css - ブートストラップ テーブル ヘッダーを修正するには?
ブートストラップ テーブル内にデータがあります。行数が増えると、縦スクロールでヘッダーが見えなくなります。そのため、ブートストラップ テーブルのヘッダーを修正して、テーブル本体を垂直方向にスクロールできるようにする必要があります。また、ページ内で段数を超えた場合の表全体の横スクロール。
ブートストラップなしの参照実装。これは、2 つのテーブルを使用して実装されます。1 つはヘッダー用、もう 1 つは本文用です。
元のデータに似た次のデータがあります。
注col-*-*： forは使用していませtableんtd。ヘッダー列が 12 を超えているためです。最大 15 まで増える可能性があります。そのため、列クラスは使用しません。
HTML
Fiddle元の質問の提供されたリンクを使用して。
上記のフィドルを見てください。ヘッダーが増えると、テーブルが歪んでしまいます。
html - ASP.NET で動的にテーブルの HTML 固定ヘッダー
データベースから移入されて、テーブルを動的に作成しました。やりたいことは、固定ヘッダーとスクロール可能なボディを作成することです。css と javascript を試しましたが、テーブルが自動的に作成されたため、何もできませんでした。ヘルプ。
これが私のコードです：
テーブルを追加する Div:
そしてテーブルのCSS：
html - スクロール可能な div 内のヘッダーと列を固定/フリーズ
この質問は重複している可能性がありますが、私の要件に対する解決策はありませんでした。スクロール可能な div 要素内のテーブルの固定/固定ヘッダーといくつかの最初の列を使用するには、助けが必要です。i 個の列と行がデータ ソースに応じて増減する可能性があるため、データは動的です。現在、行数は最大 86 行、列数は最大 55 です。列幅はデータに基づいて動的です。
私のHTMLコードは以下のようになります。
datatable - データテーブルの水平スクロール バー付きの固定テーブル ヘッダー
このhttps://l-lin.github.io/angular-datatables/#/withFixedHeaderに似た動的な angular-datatable があり、テーブルにも水平スクロールバーがあります。現在、ヘッダーのデータテーブルプラグインがスクロールをサポートしていない問題を修正しました。これを実装する方法はありますか？
html - 固定位置とスクロール可能なテーブル データ要素を含む HTML テーブル ヘッダー
この質問の主な目的は、テーブル ヘッダーを固定することです。垂直方向にスクロールすると、要素のみがスクロールされ、テーブル ヘッダーが同じ位置にある必要があります。
テーブルヘッダーの幅を手動で修正せずにこれを実行したいのですが、列ヘッダーの幅は td 要素に依存しているため、テーブルヘッダーの幅を手動で修正することで解決策が見つかったという質問がいくつかあります。
同じCSSクラス名を使用して、誰かがこれに近づくのを手伝ってくれますか
以下は私のテーブルのデモです。
上記の表に使用しているCSS
css - 表のスティッキーな行と列のヘッダー
粘着性のある行ヘッダーと粘着性のある行ヘッダーを持つテーブルを設計しようとしていますthead。したがって、基本的にはすべてのth要素が粘着性である必要があります。
position: sticky多くのブラウザーではまだサポートされていませんが (これは私にとっては問題ではありません)、この仕事に適していると思われる css3 属性を偶然見つけました。ただし、MDN のドキュメントには次のように書かれています。
テーブル要素に対する「position: sticky」の効果は、「position: relative」の場合と同じです。
これを考慮して、スティッキー要素の境界が保存されていなくても、Safari 10.0 で動作する基本的な例を作成しました。
firefox 50.0 では、ボーダーは表示されませんが、ヘッダーは固定されません。
だから、私の質問は: を使用して、この固定ヘッダーの配置をきれいに達成するにはどうすればよいですかposition: sticky? 実装 (実装された場合) は完全ではなく、テーブルのサポートはさらに少ないようです。
それが不可能な場合は、これを実現する JavaScript のソリューションにもオープンです (ただし、アプリ全体が反応しているため、スタックに jQuery を追加するのは非常に面倒です)。
ここに私が今持っているもののコードスニペットがあります。固定ヘッダーを使用するには、基本的にサファリまたはクロムのアルファ版が必要であることに注意してください。
私が試したリソース：
- typanus からの素晴らしい記事
- 広告にスティッキーを配置すると、
position: sticky position: stickyスペック_