Dies kann mit ein paar einfachen CSS-Zeilen erreicht werden. Dies macht komplexe Berechnungen aufgrund von Höhen und Positionen in jQuery überflüssig und bietet den zusätzlichen Vorteil, dass Sie bei Bedarf reagieren können.
Ziel ist es, das tfoot
Element am unteren Rand des Elements .sticky-table
absolut zu positionieren.
Um dies zu tun, können wir die .sticky-table
eine position: relative;
geben, und die tfoot
eine position: absolute; bottom: 0;
.
.sticky-table {
/* ...existing styles */
position: relative;
}
.sticky-table tfoot {
position: absolute;
bottom: 0;
}
So:
/* 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>
berechnen zu welchem Zweck? Meinst du damit die Entfernung berechnen, die benötigt wird, um nach unten zu gehen, abhängig davon, wie viele Reihen es gibt? – zer00ne
Anstatt den Abstand von oben zu definieren, haben Sie den Abstand von unten mit '.css ('bottom', 0) versucht;'? – Adriano
Keine Notwendigkeit, jQuery zu verwenden, um dies zu lösen. Ein paar einfache CSS-Zeilen sind alles, was benötigt wird. Ich habe eine Lösung zur Verfügung gestellt, die diese Methode zeigt. –