Support » Plugin: TablePress » Issue with responsive

  • Resolved florianau67

    (@florianau67)


    Hello,

    I don’t understand why, but this table does not get responsive on the phone. Any idea why ? [ redundant link removed, use the link field ]

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

Viewing 13 replies - 1 through 13 (of 13 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    tHi,

    thanks for your post, and sorry for the trouble.

    Unfortunately, your link is not working for me, I only get a “404 Not found” error. Is this really a published page?

    Regards,
    Tobias

    florianau67

    (@florianau67)

    Hello,

    Sorry, I removed it. It’s back live 🙂

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks! It seems that the Shortcode is either in a “Preformatted” block instead of a “Shortcode” block (if you are using a block editor for this page), or, if you are using more of a code editor, there are HTML <pre> and </pre> tags around the Shortcode. Could you please remove those?

    Regards,
    Tobias

    florianau67

    (@florianau67)

    Well, it’s strange, I’ve never done such a thing and I don’t use a “block editor”. Any idea how I could remove the thing ? As I don’t feel like I’ve added anything, I have no idea how to remove it :/

    florianau67

    (@florianau67)

    Ok, so, I don’t know what happened but, indeed, there were some “Pre /pre” in the code.

    I’ve removed them, but issue is still the same 🙁 Really not responsive on my phone…

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

    .tablepress {
      table-layout: auto;
    }

    With this, we can override a theme setting that is causing the shrinking of the table.
    After that, the table should be horizontally scrollable.

    Regards,
    Tobias

    florianau67

    (@florianau67)

    Amazing, it worked !

    Would this work here too : https://the-bestvpn.com/

    I don’t really like the fact that the 8 columns all appear on my desktop…as it makes each of them very small.

    If I add table-layout:auto and then define each column to be 200px (for instance) will the last ones be hidden before the scroll to the right ?

    Thank you a lot for your help,

    Regards,

    FP

    florianau67

    (@florianau67)

    I’ve added it and set all 8 columns to 200px…but unfortunately, does not seem to work 🙁 The columns are definitely not 200px wide :/

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    if you want the columns to be bigger, you could increase the padding and/or font size. Just increasing the column widths will not really work, as the browser does not actually want to do that (it wants to keep the table visible).

    You might also want to experiment with other options, e.g. from https://tablepress.org/extensions/responsive-tables/

    Regards,
    Tobias

    florianau67

    (@florianau67)

    I’ve tried to use that extension, but unfortunately, it did not work as presented on the page https://tablepress.org/extensions/responsive-tables/.

    I mean, when I use the “scroll” mode, it will still display the 8 columns on the page.

    Yet, on the exemple, in scroll, columns don’t go on 2 lines, they just take the width of the text in it, and if it’s too much, then the following columns get out of range and you need to start scrolling to see them. That’s the effect I’d like, but unfortunately, it does not work, and instead of keeping the table’s header on 1 line and have the column width take the correct size, it puts the text on 2/3 lines in order to make all 8 columns fit the screen size. I don’t know if I’m clear in the explanation, sorry :$

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

    .tablepress-id-1 thead th {
      white-space: nowrap;
    }

    The cells in the header will then not get automatic line breaks (you have to press “Enter” at the desired places to get them, if needed). With that, the table should be wider.

    Regards,
    Tobias

    florianau67

    (@florianau67)

    Awesome, this works just fine !! 🙂

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    no problem, you are very welcome! 🙂 Good to hear that this helped!

    Best wishes,
    Tobias

    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Issue with responsive’ is closed to new replies.