Freeze second column in data table using CSS - css

Question

I have some data that shown in data table. I want to freeze two columns in data table (PPD Delivery Schedule and Check Opex).
The first column is working perfectly, but the second column is not freezing.
I don't have any idea, how to make it happen. Can you guys help me how to figure it out?
Here is my code
<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;
left: 0;
background: #FFF;
border-right: 1px solid #CCC;
}
th.SecondColumn {
position: -webkit-sticky;
/* for Safari */
position: sticky;
left: 100px;
/* This is the width of first column, so second will stick to the right edge of the first column */
z-index: 999;
}
</style>
<table id="salesPlanTable" class="stripe row-border order-column" style="width:100%">
<thead>
<tr>
<th id="columnA">PPD Delivery Schedule</th>
<th id="columnA">Check Opex</th>
<th id="columnA">Sales Price</th>
<th id="columnA">Simulation Sales Price</th>
<th id="columnA">Variance Amount</th>/tr>
</thead>
<tbody>
<apex:repeat value="{!dataSalesPlan}" var="i">
<tr>
<th id="columnA">
<apex:input type="date" value="{!i.deliverySchedulePPD}">
<apex:actionSupport event="onblur" action="{!updateDeliverySchedule}" reRender="">
<apex:param name="salesPlanIndex" value="{!i.index}" assignTo="{!salesPlanIndex}" />
</apex:actionSupport>
</apex:input>
<apex:outputText styleClass="hidden" value="{0, date, MMMM d',' yyyy}">
<apex:param value="{!i.deliverySchedulePPD}" />
</apex:outputText>
</th>
<th class="SecondColumn">
<apex:inputCheckbox styleClass="checkOpex{!i.spd.ID} checkOpex {!i.spd.ID}" value="{!i.opex}">
<apex:actionSupport event="onchange" action="{!updateOpex}" reRender="">
<apex:param name="salesPlanIndex" value="{!i.index}" assignTo="{!salesPlanIndex}" />
</apex:actionSupport>
</apex:inputCheckbox>
<apex:outputText styleClass="hidden checkOpexOutput{!i.spd.ID}" value="{0}">
<apex:param value="{!i.opex}" />
</apex:outputText>
</th>
<td>
<apex:outputText styleClass="latestSalesPrice{!i.spd.ID}" value="{0, number}">
<apex:param value="{!i.latestSalesPriceDocument}" />
</apex:outputText>
</td>
<td>
<apex:input styleClass="simulationSalesPrice{!i.spd.ID}" onkeyup="changeSimulationSalesPrice(event, '{!i.spd.ID}')" value="{!i.simulationSalesPrice}">
<apex:actionSupport event="onblur" action="{!updateSimulationSalesPrice}" reRender="">
<apex:param name="salesPlanIndex" value="{!i.index}" assignTo="{!salesPlanIndex}" />
</apex:actionSupport>
</apex:input>
<apex:outputText styleClass="hidden simulationSalesPriceOutput{!i.spd.ID}" value="{0, number}">
<apex:param value="{!i.simulationSalesPrice}" />
</apex:outputText>
</td>
<td>
<apex:outputText styleClass="varianceAmount{!i.spd.ID}" value="{0, number}">
<apex:param value="{!i.VarianceAmount}" />
</apex:outputText>
</td>
</tr>
</apex:repeat>
</tbody>
</table>

Answer 1

Yes we can make second one also. Us id interested of class in td how you did for 1st one. I will work.