We need to freeze two columns in our data table - "PPD Delivery Schedule" and "Check Opex". The first column is working fine, but we're having issues freezing the second column.
We've tried various approaches but haven't been successful so far. Any guidance on how to achieve this would be greatly appreciated!
Below is the code snippet we're currently using:
<style>
:root {
--screen-width: 1440px;
}
.rich-tabpanel-content-position {
table-layout: fixed;
}
table.dataTable {
display: block;
overflow: scroll;
}
.pbBody {
max-width: var(--screen-width);
overflow-x: auto;
}
.pbBody td.rich-tab-inactive,
.pbBody td.rich-tab-active {
background-color: #7998d2;
color: #FFFFFF;
font-weigth: bold;
background-image: none;
cursor: pointer;
}
.pbBody td.rich-tab-active {
background-color: #637fb2;
}
.dataTables_length {
margin-right: 10px;
}
table.dataTable tfoot th,
table.dataTable tfoot td {
padding-left: 10px;
padding-right: 10px;
}
.loadingMessage {
margin-bottom: 10px;
display: block;
}
#PlantOptions {
width: 50px;
}
thead th {
position: -webkit-sticky;
/* for Safari */
position: sticky;
top: 0;
}
thead th:first-child {
left: 1;
z-index: 1;
}
tbody th:first-child {
left: 0;
z-index: 1;
}
#columnA {
position: -webkit-sticky;
/* for Safari */
position: sticky;
[...]