I have been looking into ways to make one of the columns in my datatable fixed. While I came across a solution using jQuery, I am interested in achieving this without relying on jQuery. Are there any tips you could offer on how to achieve this using HTML, CSS, or just vanilla JavaScript?
Below is the CSS code for my table:
#invoiceTable {
margin-top: 1.2rem;
margin: 5px;
.p-datatable-wrapper {
overflow: auto;
height: auto;
border-bottom: 1px solid #e9ecef;
.p-datatable-thead {
tr {
th:nth-child(27) {
display: flex;
flex-direction: row;
position: fixed;
}
}
}
.p-paginator {
padding: 0;
display: flex;
justify-content: start;
.p-paginator-left-content {
display: inline-flex;
align-items: center;
justify-content: center;
}
}
}
The column I want to make fixed is nth-child(27), which happens to be the last column.
Your help will be greatly appreciated.