Line breaks on narrowed tables

  • Resolved Heimhenge

    (@heimhenge)


    6 years, 11 months ago

    Don’t have a huge problem. TablePress (with the responsive extension) was just what I needed to un-break my site on mobile devices. Donated earlier today, thanks. Great plugin.

    Curious about one behavior on mobile devices. I’ve got this table that looks best at full width on a desktop/laptop. The table padding shrinks nicely to fit tablets also, without causing any line breaks. It’s only about 60% of the container width.

    But on smartphones (both real and device-simulated in my browser) the table columns shrink in width and I start getting line breaks in weird places that affects readability.

    I was under the impression from the demo on your website that the column widths would not change, lines would not break, and the table would be scrollable along its full original horizontal width.

    Did I miss a setting somewhere? Or do I need some CSS to do that?

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    thanks for your question, and sorry for the trouble.

    To achieve that, please extend your CSS

    .tablepress-id-3 {
    width: 60%;
}

    to

    .tablepress-id-3 {
    width: 60%;
    white-space: nowrap;
}

    Regards,
    Tobias

    Thread Starter Heimhenge

    (@heimhenge)

    Thanks Tobias. Worked perfectly! Kinda clunky when and exponent follows a line break. ?? Plus, I learned a new CSS trick. Rated TablePress 5/5. Great plugin, and these new extensions were sorely needed.

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

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

    Best wishes,
    Tobias

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Line breaks on narrowed tables’ is closed to new replies.