Blog Post concerning sticky table headers
- Give your region a specific height, for example 480px
- Add following lines to your css definition
table thead, table tfoot {
position: sticky;
z-index: 10;
}
table thead {
inset-block-start: 0;
}
table tfoot {
inset-block-end: 0;
background-color: white;
}
-
That should do the trick
-
I have used following code, to move the last row of the table to a new tfoot, in order to make that sticky too
-
you can place these lines inside a dynamic action - AfterRefresh on the report itself
const table = document.getElementById("report_table_empl-table");
const footer = table.createTFoot();
const rows = table.getElementsByTagName('tr');
const shifted = rows[rows.length-1];
rows[rows.length-1].parentNode.removeChild(rows[rows.length-1]);
footer.appendChild(shifted);
- don't forget to give the table an ID