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.

4

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

| improve this answer | |
  • 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 '19 at 15:52
  • Provide pls a link of playground code, then I'll be able to suggest a fix) – Oleh Berehovskyi Dec 26 '19 at 15:56
  • Playground is mention in the question but it is working fine in playground :( – gs650x Dec 26 '19 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. – Oleh Berehovskyi Dec 26 '19 at 16:08
  • But it fixes only the column header not the data :( – gs650x Dec 26 '19 at 16:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.