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; /* cause fontawesome icons */
}
table thead {
inset-block-start: 0; /* "top" */
}
table tfoot {
inset-block-end: 0; /* "bottom" */
background-color: white; /* make your background not transparent*/
}
-
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
// get the table
const table = document.getElementById("report_table_empl-table");
// Create an empty <tfoot> element and add it to the table:
const footer = table.createTFoot();
// get all rows
const rows = table.getElementsByTagName('tr');
// store the last
const shifted = rows[rows.length-1];
// remove the last
rows[rows.length-1].parentNode.removeChild(rows[rows.length-1]);
// append to footer
footer.appendChild(shifted);
- don't forget to give the table an ID