Điều này có thể đạt được bằng một vài dòng CSS đơn giản. Điều này giúp loại bỏ sự cần thiết phải thực hiện các phép tính phức tạp dựa trên chiều cao và vị trí trong jQuery, và có thêm lợi ích là đáp ứng, nếu cần thiết.
Mục tiêu là hoàn toàn định vị phần tử tfoot
ở cuối phần tử .sticky-table
.
Để làm điều này, chúng tôi có thể cung cấp cho .sticky-table
một position: relative;
và tfoot
a position: absolute; bottom: 0;
.
.sticky-table {
/* ...existing styles */
position: relative;
}
.sticky-table tfoot {
position: absolute;
bottom: 0;
}
Như thế này:
/* 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>
Nguồn
2017-12-22 10:17:47
Tính đến mục đích gì? Bạn có nghĩa là tính toán khoảng cách cần thiết để di chuyển xuống phía dưới tùy thuộc vào số hàng có? – zer00ne
Thay vì xác định khoảng cách từ trên cùng, bạn đã thử khoảng cách từ dưới cùng với '.css ('bottom', 0);'? – Adriano
Không cần sử dụng jQuery để giải quyết vấn đề này. Một vài dòng CSS đơn giản là tất cả những gì cần thiết. Tôi đã cung cấp một giải pháp cho thấy phương pháp này. –