私はこのプラグインを使用して、テーブルでスティッキーなテーブルヘッダーを実現しています。実際、プラグインの例と私のページのように、テーブルのヘッダーはテーブルの最後の行の少し後に消えます。最後の行がなくなったときにテーブルヘッダーが正確に消えるようにしたいのですが、それを達成するチャンスはありますか？
9106 次
5 に答える
4
これが実際の例です：フィドル
私が変更したのは、この行の終わりだけでした。
if ((scrollTop > offset.top) && (scrollTop < offset.top + $this.height()-base.$clonedHeader.height())) {
于 2012-09-13T12:12:23.327 に答える
2
これは、divテーブルを使用して実現できます。
.td.header {
position: sticky;
top:0px;
}
簡単な例については、このjsfiddleを確認してください。
編集：
直感的に追加する必要があるように見えます
position: sticky;
一度テーブル行に移動しますが、そうではありません。ヘッダーセルであるはずの各テーブルセルに追加する必要があり、それでうまくいきます。
于 2019-07-16T17:19:42.720 に答える
1
githubにバグレポートを追加できます。
于 2012-09-13T12:00:22.703 に答える
1
私はこれが古いことを知っています、しかし私はいくつかを助けるかもしれない何かを貢献したいと思いました...
動的テーブル（各セルの幅が事前に計算されている）の場合、このプラグインはヘッダー行の幅を台無しにします。
最初のtbody行に基づくセルから、各outerWidthに基づいて幅を計算するのに役立ついくつかの変更を加えました。
まず、プラグインの現在の幅の計算をコメントアウトします。
base.updateWidth = function () {
// Copy cell widths and classes from original header
$('th', base.$clonedHeader).each(function (index) {
var $this = $(this);
var $origCell = $('th', base.$originalHeader).eq(index);
this.className = $origCell.attr('class') || '';
//$this.css('width', $origCell.width());
});
// Copy row width from whole table
//base.$clonedHeader.css('width', base.$originalHeader.width());
};
// Run initializer
base.init();
次に、base.toggleHeaders = function（）{の最後に以下を追加します。
// Set cell widths for header cells based on first row's cells
var firstTr = $this.children("tbody").children("tr").first();
var iCol = 0;
$(firstTr).children("td:visible").each(function()
{
var colWidth = $(this).outerWidth();
console.log(colWidth.toString());
var headerCell = $this.children("thead.tableFloatingHeader").children("tr").children("th:eq(" + iCol + ")");
var firstRowCell = $this.children("tbody").children("tr:first").children("td:eq(" + iCol + ")");
$(headerCell).outerWidth(colWidth);
$(firstRowCell).outerWidth(colWidth);
iCol++;
});
于 2013-09-12T03:02:53.790 に答える
0
テーブルをページの上部に固定し、最後の行がなくなると正確に消えるようにするjqueryライブラリを作成しました
これは、ScrollFix https://github.com/ShiraNai7/jquery-scrollfixライブラリと組み合わせて、メインメニューの下に固定されたヘッダーテーブルを提供する小さなjqueryライブラリ関数です。ライブラリは同じページで複数のテーブルをサポートします
于 2016-01-05T15:00:19.900 に答える