I have a requirement where in need to fix the header of a UI Table, so that when the user scrolls down through the table content he is still able to see the column headers.
I do not want to set visibleRowCount property as it affects with another functionality that I have implemented to merge cells.
Also, I have my first column as a fixed column in the UI table.
I have tried some css code for that table, which partially worked, but it creates a separate scroll for the first column as it is fixed.
I have attached images
.original-view-without-css.png
with-css-two-scroll-bars-created.png
Below is the css code I have used.
thead {
text-align:left;
display: block;
/*float: left;*/
/* width: 100%; */
width: 100%;
}
thead tr {
display: table-row !important;
width: 100% !important;
}
tbody {
display: block;
/* height: 480px; */
height: 500px;
overflow-y : overlay;
/*float: left;*/
width: 100%;
}
tbody tr {
display: table-row !important;
width: 100% !important;
}
th, td {
width: 290px !important;
}
table {
table-layout: fixed !important;
}
If you have any other approach in mind that works, please advise.
Add comment