Mobile Table Width

Hi,

thanks for your post, and sorry for the trouble.

For this, I recommend taking a look at the possible modes for making a table work nicely on small screens, as available in the Responsive Tables feature module that is part of the TablePress premium versions.

Best wishes,
Tobias

You mean we have to upgrade to resize for mobile phones? There is no css that works resize the table for a mobile view?

Hi,

well, a table will normally automatically resize and adjust to small screens — as long as the content in it allows that. For example, if a table has very long words, these might result in the table still stretching beyond the edge of a small screen.

So, the question is what you mean by “resize” here. To get around this issue, you could also reduce the font size on small screens (so that the long words fit into the columns), or you could instruct the browser to add line breaks inside the words (even though this might result in line breaks in wrong places). Therefore, such an approach is usually not that well suited, whereas the mentioned TablePress Pro feature offers other solutions.

Regards,
Tobias

Thank you Tobias. Is there a css code to reduce the font size on small mobile screens and not affect the rest of the page? Seems to be working now as the responsive just seems to be slow. But like to ability to reduce the size.

Hi,

reducing the font size on small screens only, without affecting the page, could be done with

@media screen and (max-width: 768px) {
  .tablepress {
     font-size: 10px;
  }
}

— but I’m not sure that this is a better way than having the table scrollable.

Best wishes,
Tobias