使用CSS冻结数据表列故障求助：第二列无法冻结问题排查

I see the issue with your second column not sticking—let's break down what's wrong and how to fix it:

Key Problems in Your Current Code #

1. Duplicate IDs: You're using id="columnA" for multiple elements, which is invalid HTML (IDs must be unique). This confuses the browser's styling targeting.
2. Missing Class on Header Column: The second column's header <th> in <thead> doesn't have the SecondColumn class, so it never gets the sticky styling applied.
3. Incorrect Z-Index Order: Your second column has a higher z-index than the first, which would cause it to overlap or cover the first column instead of sitting beside it.
4. Typo in First Column Position: left: 1 should be left: 0 for the first column to stick correctly to the edge.
5. Font Weight Typo: font-weigth was misspelled, preventing bold text from working as intended.

Corrected Code #

Updated CSS

: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-weight: 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; }

/* First Sticky Column Styles */
thead th#firstColumn, tbody th.firstColumn {
    position: -webkit-sticky; /* Safari support */
    position: sticky;
    left: 0;
    background: #FFF;
    border-right: 1px solid #CCC;
    z-index: 2; /* Higher z-index to stay above second column */
}

/* Second Sticky Column Styles */
thead th.SecondColumn, tbody th.SecondColumn {
    position: -webkit-sticky; /* Safari support */
    position: sticky;
    left: 100px; /* Match the actual width of your first column */
    background: #FFF;
    border-right: 1px solid #CCC;
    z-index: 1; /* Lower than first column to avoid overlapping */
}

thead th {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background: #FFF; /* Ensure header stays visible with vertical scroll */
}

Updated HTML Table

<table id="salesPlanTable" class="stripe row-border order-column" style="width:100%">
    <thead>
        <tr>
            <th id="firstColumn">PPD Delivery Schedule</th>
            <th class="SecondColumn">Check Opex</th>
            <th>Sales Price</th>
            <th>Simulation Sales Price</th>
            <th>Variance Amount</th>
        </tr>
    </thead>
    <tbody>
        <apex:repeat value="{!dataSalesPlan}" var="i">
            <tr>
                <th class="firstColumn">
                    <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>

Additional Notes #

• Adjust left:100px: Make sure this value matches the actual rendered width of your first column. If your first column is wider or narrower than 100px, update this to prevent gaps or overlaps.
• DataTables Compatibility: If you're initializing DataTables, add scrollX: true to your initialization code to enable horizontal scrolling, which works seamlessly with sticky columns.
• Consistent Styling: I added a white background to the header th elements to ensure they don't become transparent when scrolling vertically.

This should resolve the issue and make both columns stick when scrolling horizontally.

内容的提问来源于stack exchange，提问作者Akun Premium1009