table spilling off page on mobile

Hi,

thanks for your post, and sorry for the trouble.

The reason why this is not working is that you can not simply reduce the column width, as that’s defined by the content in the table. So, we will have to start thinking about ways to reduce the width of the content.
For text, this could be done by reducing font size for example. In your case, we could also consider introducing more line breaks.
To try that, please first uncheck the “Use DataTables” checkbox on the table’s “Edit” screen (as the individual features are not used here anyways, but might interfere here).
Then, you could try allowing more line breaks, e.g. by using this “Custom CSS”:

.tablepress-id-7 thead th,
.tablepress-id-7 tbody td {
  word-break: break-word;
  width: 20%;
}

Regards,
Tobias

thank you! i realised it was my theme that was causing the problem and so in my additional CSS tab i’ve added this

.table-responsive {
overflow-x: initial;
}

@media screen and (max-width: 767px) {
.table-responsive>.table>thead>tr>th,
.table-responsive>.table>tbody>tr>th,
.table-responsive>.table>tfoot>tr>th,
.table-responsive>.table>thead>tr>td,
.table-responsive>.table>tbody>tr>td,
.table-responsive>.table>tfoot>tr>td {
white-space: normal;
}

.table-responsive {
overflow-y: initial;
border: none;
}
}

However, I still seem to have a problem here: https://milelion.com/credit-cards/credit-card-lounge-benefits-compared/

My text is all in red, even though I’ve specified black in the custom CSS.

.tablepress-id-7 tbody td {
font-family: Tahoma;
font-size: 10px;
color: #000000;
}

Also, how do i change the text size of the header? right now it is too large

thank you so much

Hi,

it seems like TablePress is unable to modify the CSS files, probably due to file access rights. To fix this, please delete the three CSS file

/wp-content/tablepress-custom.css
/wp-content/tablepress-combined.css
/wp-content/tablepress-combined.min.css

from your server and save the “Custom CSS” again.

To reduce the header font size, you can use the CSS code

.tablepress thead th {
	font-size: 14px;
}

Regards,
Tobias