Table Header in multiple lines on mobile

  • Resolved armandoarrastia

    (@armandoarrastia)


    6 years, 6 months ago

    Hi Tobias.

    My table that looks great on desktop. However, on iPhone in vertical view the table heading breaks into three lines rather than staying on one line. So it looks like this:

    This
    Week’s
    Specials…

    Instead of this:

    This Week’s Specials…

    When I turn the phone horizontal, it looks fine. But it looks like there is enough space for it to work the same way in vertical view.

    Any suggestions? I could not narrow this down by searching the support threads.

    Thanks for the GREAT plugin!

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

Viewing 1 replies (of 1 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    6 years, 6 months ago

    Hi,

    thanks for your question, and sorry for the trouble.

    To fix this, I recommend to add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

    .tablepress {
	word-wrap: normal;
	word-break: normal;
	hyphens: none;
}
.tablepress-id-5 thead th {
	white-space: nowrap;
}

    In addition, I suggest to merge the cells in the header row, by adding the #colspan# keyword to the cell on the right of the text, via the “colspan” button on the table’s “Edit” screen.

    Regards,
    Tobias

Viewing 1 replies (of 1 total)
  • The topic ‘Table Header in multiple lines on mobile’ is closed to new replies.