Table not scrollable

  • Resolved Nezul

    (@radwolf83)


    1 year, 4 months ago

    Hi there:

    I use the table with shortcode. What happens is that the table occupies the full width of the device but the rest of the content is reduced. I don’t know why. I would like the table to be able to scroll sideways and the rest of the page to stay in the right proportion.

    Any help?

    Thanks in advance.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • I can’t actually see a table on the page you have linked to, but I think you need to set overflow-x to auto on the parent div of your table.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    This is the classical problem of responsiveness for tables on a website. You could turn on the “Horizontal Scrolling” checkbox in the “Table Features for Site Visitors” section on the table’s “Edit” screen here. Alternatively, the suggestion by gomez77 would also work, but requires custom coding. Finally, you could also look into using the Responsive Tables features module that is part of the TablePress premium versions. This offers even more possibilities for making a table responsive.

    Best wishes,
    Tobias

    You can add the below custom CSS in the Plugin Options

    .tablepress {
    display: block;
    overflow-x: scroll;
    }

    You can update the CSS as per your scroll requirement.

    For Reference check the result here: https://zenkins.com/hire/dotnet-developers/

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for sharing this approach! Changing the display CSS property of tables to block is not something that I recommend, as it can influence other parts of the style and have effects on accessibility. Adding a wrapper is often the better solution here.

    Best wishes,
    Tobias

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Table not scrollable’ is closed to new replies.