Responsive Table Images

Hi,

thanks for your question, and sorry for the trouble.

If you want the columns to appear at the same size, you will have to set column widths, and/or widths for the images.
On mobile, I recommend to set a smaller width, e.g. using a CSS3 Media Query.

As you have quite a few tables on that page, I would recommend to use the page ID in the CSS. That way, you don’t have to add the CSS for each table individually.

So, something like this maybe:

.page-id-546 .tablepress .column-1 img {
  width: 180px;
}

@media screen and (max-width: 768px) {
  .page-id-546 .tablepress .column-1 img {
    width: 90px;
  }
}

Note that the text in your table also has an effect on the width. For example, a first column will never be smaller than the name in the header (which for example affects “Stephanie” most). Also, the second column will never be smaller than the email addresses that you are showing, as the browser treats these as one very long word – to which it can not add line breaks automatically.

Regards,
Tobias

Hi,

yes, that’s correct. The ones with longer words can not resize to small values. After all, the text has to go somewhere, and therefore, the browser will make the columns wider.
You would have to add CSS to reduce the font size on small screens, like

@media screen and (max-width: 768px) {
  .page-id-546 .tablepress .column-1 {
    font-size: 12px;
  }
}

Having such a proportional scaling done automatically is not possible, unfortunately 🙁

Regards,
Tobias

Hi,

yes, that might be a good idea. Tables are tough to get right on small screens 🙁

Regards,
Tobias