I have a HTML table with 2 rows in its footer, the vertical and horizontal scroll work fine, but I would like to keep one of the footer rows fixed (not scrolling at all), in order to show pagination controls.
I wonder if this is possible using only CSS.
I have tried changing the display and position properties to the second row, but without the expected results.
/* Center the grid container */
.container {
width: 800px;
height: 600px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Grid style */
#grid {
margin-top: 25px;
position: relative;
left: 50%;
transform: translateX(-50%);
width: 70%;
max-width: 90%;
min-width: 400px;
overflow: hidden;
height: auto;
max-height: 473px;
}
/* Table size */
table {
height: 388px;
margin: 0 auto !important;
display: block;
overflow-x: auto;
border-spacing: 0;
}
tbody {
white-space: nowrap;
}
.caption {
padding: 10px 10px 0px 10px;
font-weight: bold;
background: #b3b3b3;
border-bottom: 1px solid #c8c6c6;
position: sticky;
top: 0;
z-index: 2;
}
/* Columns style */
th {
background: #b3b3b3 !important;
vertical-align: bottom;
text-transform: capitalize;
}
th.fixed {
position: sticky;
right: 0;
z-index: 2;
}
td.fixed {
position: sticky;
right: 0;
z-index: 1;
}
/* Header & Footer row style */
thead tr {
position: sticky;
top: 0;
z-index: 2;
}
tfoot {
position: sticky;
z-index: 2;
bottom: 0;
}<div class="container">
<div id="grid">
<div class="caption row justify-content-evenly">
<h5 class="col-11">This is the caption</h5>
<button id="closeBtn col" type="button" class="btn-close"></button>
</div>
<table class="table table-striped table-hover table-bordered">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th class="fixed">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Double Bastard Ale</td>
<td>Red Stripe</td>
<td>Pilsner</td>
<td>Newport</td>
<td>1388 - Belgian Strong Ale</td>
<td>Wheat mal</td>
<td>2.8%</td>
<td class="fixed"><button class="editBtn btn btn-sm btn-outline-success">Edit</button> <button class="delBtn btn btn-sm btn-outline-danger">Delete</button></td>
</tr>
<tr>
<td>Brooklyn Black</td>
<td>Samuel Adams</td>
<td>Stout</td>
<td>Mt. Rainier</td>
<td>2206 - Bavarian Lager</td>
<td>Rye malt</td>
<td>3.7%</td>
<td class="fixed"><button class="editBtn btn btn-sm btn-outline-success">Edit</button> <button class="delBtn btn btn-sm btn-outline-danger">Delete</button></td>
</tr>
<tr>
<td>St. Bernardus Abt 12</td>
<td>Paulaner</td>
<td>Light Lager</td>
<td>Liberty</td>
<td>3278 - Belgian Lambic Blend</td>
<td>Chocolate malt</td>
<td>3.6%</td>
<td class="fixed"><button class="editBtn btn btn-sm btn-outline-success">Edit</button> <button class="delBtn btn btn-sm btn-outline-danger">Delete</button></td>
</tr>
<tr>
<td>Westmalle Trappist Tripel</td>
<td>Samuel Adams</td>
<td>India Pale Ale</td>
<td>Equinox</td>
<td>3942 - Belgian Wheat</td>
<td>Caramel</td>
<td>4.6%</td>
<td class="fixed"><button class="editBtn btn btn-sm btn-outline-success">Edit</button> <button class="delBtn btn btn-sm btn-outline-danger">Delete</button></td>
</tr>
<tr>
<td>Trappistes Rochefort 8</td>
<td>Pacifico</td>
<td>German Wheat And Rye Beer</td>
<td>Mt. Hood</td>
<td>3278 - Belgian Lambic Blend</td>
<td>Carapils</td>
<td>7.9%</td>
<td class="fixed"><button class="editBtn btn btn-sm btn-outline-success">Edit</button> <button class="delBtn btn btn-sm btn-outline-danger">Delete</button></td>
</tr>
<tr>
<td>La Fin Du Monde</td>
<td>Harp</td>
<td>Light Hybrid Beer</td>
<td>Cashmere</td>
<td>5112 - Brettanomyces bruxellensis</td>
<td>Chocolate</td>
<td>4.7%</td>
<td class="fixed"><button class="editBtn btn btn-sm btn-outline-success">Edit</button> <button class="delBtn btn btn-sm btn-outline-danger">Delete</button></td>
</tr>
<tr>
<td>Sierra Nevada Celebration Ale</td>
<td>Red Stripe</td>
<td>Belgian And French Ale</td>
<td>Willamette</td>
<td>1332 - Northwest Ale</td>
<td>Caramel</td>
<td>8.0%</td>
<td class="fixed"><button class="editBtn btn btn-sm btn-outline-success">Edit</button> <button class="delBtn btn btn-sm btn-outline-danger">Delete</button></td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th class="fixed"></th>
</tr>
<tr>
<td colspan="8">
<span>Records per page:</span>
<span>
<select id="recordsPage">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="75">75</option>
<option value="100">100</option>
</select>
</span>
<span>1-10</span><span> of </span><span>1000</span>
<button class="col-1 btn btn-sm btn-outline-dark">First</button>
<button class="col-1 btn btn-sm btn-outline-dark ms-2">Previous</button>
<button class="col-1 btn btn-sm btn-outline-dark ms-2">Next</button>
<button class="col-1 btn btn-sm btn-outline-dark ms-2">Last</button>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
2
Answers
=>
You can do it but it is kind of hacky as hell.
Put the footer content in the first
tdthen have an emptytdthat spans the other columns. Give your footer tdposition:sticky; left:0;and (importantly)white-space:nowrapsince we want the content to expand out of its cell and be stuck to the side.EG:
But why bother? You could just put the pagination content in a
divoutside of thetablerather than in thetfoot.