私はスクロールdivの最後にテーブルのフッター行の各thタグを移動する必要があるというシナリオがあります。ここにはplnkrがあります。jqueryを使用してスクロールdivの下にテーブルフッタを動的に移動
私はそれが
$('.sticky-table').find("table tfoot tr.sticky-row th").css('top', 260);
によってハードコードが、私は260を計算し、それをやりたい移動することができます。助けが必要。
コンテナ全体の下部位置を計算し、フッターヘッダーと水平スクロールバーの高さを引いて計算する必要があります。フッター行th要素の一番上の位置を取得します。
$('.sticky-table.sticky-headers').offset().top //top of the container
+ $('.sticky-table.sticky-headers').outerHeight() //height of the container (adding it with top gives you the bottom position of the container)
- $('.sticky-table').find("table tfoot tr.sticky-row th").outerHeight(true) //height of the footer headers
- 11 //Fixed height of the scrollbar
更新日：plunkerが作成されました。
ありがとうございます。私は固定ヘッダー、列とフッターテーブルを作成するthiscodeを通じて自分の目標を達成します。 –
これは、CSSの簡単な行で実現できます。これにより、jQueryの高さと位置に基づいて複雑な計算を行う必要がなくなり、必要に応じて応答性が向上します。
.sticky-table要素の下部にtfoot要素を絶対的に配置することを目標としています。
これを行うには、.sticky-tableをposition: relative;、tfootをposition: absolute; bottom: 0;とすることができます。このよう
.sticky-table {
/* ...existing styles */
position: relative;
}
.sticky-table tfoot {
position: absolute;
bottom: 0;
}
：
/* Styles go here */
.sticky-table {
position: relative;
max-width: 100%;
max-height: 500px;
height: 500px;
overflow: auto;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding: 0 !important;
}
.sticky-table table {
margin-bottom: 0;
width: 100%;
max-width: 100%;
border-spacing: 0;
}
.sticky-table table tr.sticky-row th,
.sticky-table table tr.sticky-row td {
background-color: #fff;
border-top: 0;
position: relative;
outline: 1px solid #ddd;
z-index: 5;
}
.sticky-table table td.sticky-cell,
.sticky-table table th.sticky-cell {
background-color: #fff;
outline: 1px solid #ddd;
position: relative;
z-index: 10;
}
.sticky-table table tr.sticky-row td.sticky-cell,
.sticky-table table tr.sticky-row th.sticky-cell {
z-index: 15;
}
.sticky-table tfoot {
position: absolute;
bottom: 0;
}
.sticky-table::-webkit-scrollbar {
width: 0.7em;
height: 0.7em;
}
.sticky-table::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
.sticky-table::-webkit-scrollbar-thumb {
background-color: #b37e7e;
outline: 1px solid slategrey;
border-radius: 5px;
}<div class="row">
<div class="col-md-12">
<div class="sticky-table sticky-headers">
<table class="table table-striped table-striped">
<thead>
<tr class="sticky-row">
<th>Campaign Name</th>
<th>Ad Sets</th>
<th>Ads</th>
<th>Blue</th>
<th>2000</th>
<th>Ford</th>
<th>Escort</th>
<th>Blue</th>
<th>2000</th>
<th>Ford</th>
<th>Escort</th>
<th>Blue</th>
<th>2000</th>
<th>2000</th>
<th>Ford</th>
<th>Escort</th>
<th>Blue</th>
<th>2000</th>
<th>2000</th>
<th>Ford</th>
<th>Escort</th>
<th>Blue</th>
<th>2000</th>
<th>2000</th>
<th>Ford</th>
<th>Escort</th>
<th>Blue</th>
<th>2000</th>
<th>2000</th>
<th>Ford</th>
<th>Escort</th>
<th>Blue</th>
<th>2000</th>
<th>2000</th>
<th>Ford</th>
<th>Escort</th>
<th>Blue</th>
<th>2000</th>
</tr>
</thead>
<tbody>
<tr>
<td class="sticky-cell">Demo Campaign</td>
<td class="sticky-cell">100</td>
<td class="sticky-cell">200</td>
<td>2000</td>
<td>Ford</td>
<td>Escort</td>
<td>Blue</td>
<td>2000</td>
<td>Ford</td>
<td>Escort</td>
<td>Blue</td>
<td>2000</td>
<td>2000</td>
<td>Ford</td>
<td>Escort</td>
<td>Blue</td>
<td>2000</td>
<td>2000</td>
<td>Ford</td>
<td>Escort</td>
<td>Blue</td>
<td>2000</td>
<td>2000</td>
<td>Ford</td>
<td>Escort</td>
<td>Blue</td>
<td>2000</td>
<td>2000</td>
<td>Ford</td>
<td>Escort</td>
<td>Blue</td>
<td>2000</td>
<td>2000</td>
<td>Ford</td>
<td>Escort</td>
<td>Blue</td>
<td>2000</td>
<td>2000</td>
</tr>
<tr>
<td class="sticky-cell">Demo Campaign</td>
<td class="sticky-cell">100</td>
<td class="sticky-cell">200</td>
<td>Blue</td>
<td>2000</td>
<td>Ford</td>
<td>Escort</td>
<td>Blue</td>
<td>2000</td>
<td>Ford</td>
<td>Escort</td>
<td>Blue</td>
<td>2000</td>
<td>2000</td>
<td>Ford</td>
<td>Escort</td>
<td>Blue</td>
<td>2000</td>
<td>2000</td>
<td>Ford</td>
<td>Escort</td>
<td>Blue</td>
<td>2000</td>
<td>2000</td>
<td>Ford</td>
<td>Escort</td>
<td>Blue</td>
<td>2000</td>
<td>2000</td>
<td>Ford</td>
<td>Escort</td>
<td>Blue</td>
<td>2000</td>
<td>2000</td>
<td>Ford</td>
<td>Escort</td>
<td>Blue</td>
<td>2000</td>
</tr>
</tbody>
<tfoot>
<tr class="sticky-row">
<th class="sticky-cell">Demo Campaign</th>
<th class="sticky-cell">100</th>
<th class="sticky-cell">200</th>
<th>Blue</th>
<th>2000</th>
<th>Ford</th>
<th>Escort</th>
<th>Blue</th>
<th>2000</th>
<th>Ford</th>
<th>Escort</th>
<th>Blue</th>
<th>2000</th>
<th>2000</th>
<th>Ford</th>
<th>Escort</th>
<th>Blue</th>
<th>2000</th>
<th>2000</th>
<th>Ford</th>
<th>Escort</th>
<th>Blue</th>
<th>2000</th>
<th>2000</th>
<th>Ford</th>
<th>Escort</th>
<th>Blue</th>
<th>2000</th>
<th>2000</th>
<th>Ford</th>
<th>Escort</th>
<th>Blue</th>
<th>2000</th>
<th>2000</th>
<th>Ford</th>
<th>Escort</th>
<th>Blue</th>
<th>2000</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
計算何の目的か？そこにある行の数に応じて、下に移動するのに必要な距離を計算することを意味しますか？ – zer00ne
上からの距離を定義する代わりに、下から '.css（ 'bottom'、0）;で距離を試しましたか？ – Adriano
これを解決するためにjQueryを使用する必要はありません。 CSSのいくつかの単純な行だけが必要です。私はこの方法を示す解決法を提供しました。 –