How to keep left column fixed

  • Resolved strkamp

    (@strkamp)


    4 years, 4 months ago

    Hello there. I have a table that has many columns and as such the table extends beyond the limits of my main blog area.

    What I would like to ask is if there is a way to make the first column stay fixed when I scroll the table to the right so I keep seeing it while the rest of the columns scroll normally.

    This would be particularly useful as when you have a comparison table with products on the first column and their characteristics on the others, if you scroll to the right of the table you cannot see which product (first column on the left) you are looking for.

    Any ideas?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support juniorninja

    (@mrkevinmiller)

    Hello @strkamp,
    You can use this css inside your tables custom css:

    #footable_parent_NT_ID   tbody tr td:nth-child(1), #footable_parent_NT_ID   thead th:nth-child(1){
    position: sticky;
    position: -webkit-sticky;
    left: 0;
    z-index: 1;
    background: #fafafb;
    font-weight:bold;
}

    Thanks

    Thread Starter strkamp

    (@strkamp)

    The CSS code worked like a charm!

    Thank you very much! I really appreciate it!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to keep left column fixed’ is closed to new replies.