0

I need to make the Header of this Lightning Component Static. As the user scrols down, the header stays on the screen to consult the field.

 <div class="slds-table--header-fixed_container" style="height:450px;">
            <div class="slds-scrollable" style="height:100%;">
                <table class="slds-table slds-table_bordered slds-table_col-bordered" >
                    <thead>
                                                                    
                            <th class="textSize" scope="col" style="text-align: center;">
                                <div class="slds-truncate " title=""></div>
                            </th>
                            <th class="textSize" scope="col" style="text-align: center;" >
                                <div class="slds-truncate " title="Header Title">HeaderTitle3</div>
                            </th>     
       

I've already tried the command :''slds-cell-fixed'', but it just broke the visualization, without freezing the header.

Anybody has any tip, or any information on how I can make this ?

Thanks in advance,

1 Answer 1

1

A single line of CSS should solve all your issues.

.table--header {
  position: sticky;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/position

This acts in a similar way to position: fixed but will keep the element within your component. But, it still takes up its relative space (which is handy if your table has less the height: 450px; worth of content.)

<div class="slds-table--header-fixed_container" style="height:450px;">
  <div class="slds-scrollable" style="height:100%;">
    <table class="slds-table slds-table_bordered slds-table_col-bordered" >
      <thead class="table--header"> <!-- add the extra class name here -->
        <th class="textSize" scope="col" style="text-align: center;">
          <div class="slds-truncate " title=""></div>
        </th>
        <th class="textSize" scope="col" style="text-align: center;" >
          <div class="slds-truncate " title="Header Title">HeaderTitle3</div>
        </th>
      </thead>
      <tbody>
        <!-- your table items here -->
      </tbody>
    </table>
  </div>
</div>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .