Often times in Reports, developers want to ensure that the header row on a table “sticks” with the data as a user scrolls down the page. All Reports utilize this feature, available via the Application Property ‘Lock Table Header on Screen’. For Bootstrap reports, we’ve occasionally noticed situations where the use of this property was not always creating aligned column headers within the report table when scrolling. In these situations, instead of using the Lock Table Header on Screen’ property, please use the following snippet of CSS code to create a sticky header for your report table. Please insert the CSS code into the <head></head> section of your Report HTML. Note, this CSS rule can also be applied to your dictionary stylesheet.
<style type="text/css">
.tableFixHead {
overflow-y: auto;
height: 200px;
}
.tableFixHead table {
border-collapse: collapse;
width: 100%;
}
.tableFixHead th,
.tableFixHead td {
padding: 8px 16px;
}
.tableFixHead th {
position: sticky;
top: 45px;
background: #fff;
}
</style>To have a the report table use this sticky header, you will need to add the ‘tableFixHead’ (without the quotes) to the list of classes on the <table> element.
