Freeze second column in data table using 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.