Support » Plugin: TablePress - Tables in WordPress made easy » Resize Entire Table

  • Resolved dhazi

    (@dhazi)


    Hello, I am wondering how to resize an entire table. I am currently using

    [table id=1234 responsive=scroll responsive_breakpoint=all /]

    However, it does not resize the table, it only enables horizontal scrolling. I would like to have responsiveness and the table to shrink, not scroll, when the screen size gets smaller.

    URL Example: https://www.cordcuttingreviews.com/how-to-watch-green-bay-packers-games/

    I am not a dev, so a sesame street level response/instructions would be much appreciated.

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

Viewing 6 replies - 1 through 6 (of 6 total)
  • Hi all,
    The flip and stack modes (but not the others!) can be further customized, by adding another parameter that defines for which screen sizes the mode should be used.
    It´s right, that the “scroll” mode only enables horizontal scrolling.
    But i have the same problem:
    I want resize the width of the columns on mobile phones and tried it with media queries in the custom css (settings of table press), but that had no effect.
    How and where can you adjust the size for mobile phones?

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    Indeed, the shown Shortcode would only add horizontal scrolling to the table – which is too wide for the content area to fit. That’s essentially because the content in the cells (text, images, and white space around them, …) require space.

    So, if you want the table to shrink, you will need to “sacrifice” something, essentially from these:

    • You could tell the browser to make the images smaller.
    • You could reduce the white space/padding in the cells (content will be closer together). (You actually have set that to a comparably big 20px in the TablePress “Custom CSS”.)
    • You could instruct the browser to add word-wrapping (i.e. even short words will be hyphenated).
    • You could reduce the font size of the text.

    Regards,
    Tobias

    Hi Tobias,
    `it all works!
    But I would like the columns on mobile phones to be a little wider.
    That’s why I set horizontal scrolling.
    I tried this:
    @media (max-width: 769px) {

    .tablepress-id-8 tbody td {
    font-family: Roboto;
    font-size: 17px;
    color: # 000000;
    }
    .tablepress-id-8 .column-1 {
    width: 260px;
    }
    }
    But the column width has not changed on my smartphone. What am I doing wrong?
    Increasing the column width works for the desktop version.
    Kind regards,
    Nuray

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    please try using

    .tablepress-id-8 .column-1 {
      width: 260px;
      min-width: 260px;
    }

    for this.

    Regards,
    Tobias

    Hi Tobias,
    That’s it! Thanks a lot.

    Kind regards,
    Nuray

    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 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Resize Entire Table’ is closed to new replies.