1

I have a manual table in LWC Playground

I want to fix the first left column of the table, I tried cell fixed, position sticky and the below CSS but still no luck

.table tr td:first-child {
      position:sticky;
      z-index: 1
}

Could someone please suggest how can I fix the first left column as shown in the playground? Opportunity Name should be fixed in the horizontal scroll.

1 Answer 1

5

Try this one css selector :

table tr>th:first-child
/* or .slds-table tr>th:first-child */ {
  position: sticky;
  z-index: 1;
  top: 0;
  left: 0;
}

Element selector goes without prepending . dot sign

Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned. You must specify a threshold with at least one of top, right, bottom, or left for sticky positioning to behave as expected. Otherwise, it will be indistinguishable from relative positioning.

Sticky Positioning

6
  • Thank you for your response it is working as expected in playground but in real time it work only on the column header not on the data below the header, and I have 2 tables on my page and the above fix first column header for both of the tables, and I need to fix only one of them, could you please suggest
    – gs650x
    Dec 26, 2019 at 15:52
  • Provide pls a link of playground code, then I'll be able to suggest a fix) Dec 26, 2019 at 15:56
  • Playground is mention in the question but it is working fine in playground :(
    – gs650x
    Dec 26, 2019 at 15:56
  • 1
    Just try to make your CSS selectors more specific. For instance, add some custom class to the target table and rewrite the selector so as to apply this selector to only this table. Chrome debug inspector can help you a lot. Dec 26, 2019 at 16:08
  • But it fixes only the column header not the data :(
    – gs650x
    Dec 26, 2019 at 16:12

You must log in to answer this question.

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