lines not aligning on mobile view

Hi Padraigh,

Thank you for reaching out, and sorry for your trouble.

The cause for this basically is that your table is wider than the available screen width on smaller screens, like phones. The browser then doesn’t want to make the table even wider, so that it uses all possibilities it has for making the table more narrow, including line breaks at characters where this is normally done. Fortunately, we can prevent the cell content breaking into multiple lines here, by adding a small piece of CSS code.

For that, please go to your WordPress dashboard > TablePress > Plugin Options > Custom Styling > Custom CSS and add the following CSS code to the field:

.tablepress-id-21 .column-6,
.tablepress-id-21 .column-8 {
  white-space: nowrap;
}

This will cause the header and body cells of the score columns (numbers 6 and 8) of this table to not break their content into multiple lines.

You can copy this code for other such tables as well, and adjust the table ID and column numbers as needed.

If there are more tables that shows this behavior, and where the scores are in columns 6 and 8, you can simplify this process and code for these tables by using an “Extra CSS class”: On the “Edit” screens of the relevant tables, add e.g. tablepress-table-scores-6-8 to the “Extra CSS classes” field, and then change that CSS code (just once) to

.tablepress-table-scores-6-8 .column-6,
.tablepress-table-scores-6-8 .column-8 {
  white-space: nowrap;
}

This way, there will be just one common block of CSS code for multiple tables, and the code will be “assigned” to the table by configuring the “Extra CSS class” for them.

Best wishes,
Tobias