column names are overlapping in PageBlock table when i use in lightning

Question

<apex:pageBlockTable var="a" value="{!selected}">
            <apex:column value="{!a.Name}"/>
            <apex:outputLabel></apex:outputLabel>
            <apex:column value="{!a.Account.Name}"/>
            <apex:column value="{!a.CloseDate}"/>
            <apex:column value="{!a.Amount}"/>
            <apex:column value="{!a.Owner.Name}"/>
        </apex:pageBlockTable>

I tried with width attribute and some CSS functionality but couldn't resolve it. How to give space between column when I use in lightning. This is Normal VF Page i just used lightningStylesheets="true" standardStylesheets="false" in VF Page. In Classic it is working fine like below

Answer 1

I'd have expected SLDS to include that behavior automatically, but you can fix this with a little bit of effort:

<apex:column headerClass="slds-truncate" value="{!a.Account.Name}"/>

This should add the behavior you're expecting.