Hi Scott,
thanks for your post, and sorry for the trouble.
Well, the problem here is a general issue about how tables behave in websites. By default, it is not the outer size of the table that determines the size of the inner contents and elements, but it is the other way around. The content in the cells requires a minimum width, as text and/or images require a minimum width. For text, this is especially important, as for example long words will not be word-wrapped automatically. Thus, the longest word in a cell usually defines that cell’s minimum width. Additionally, each cell usually has padding and margin, which is added to that minimum width. And with that, the sum of all minimum widths of all columns determines the minimum width of the table. Setting the width of a table to something smaller does then not work. There’s no easy and reliable way around this (or at least, I’m not aware of one).
So, from what I can see, you already seem to have deployed one solution: Reducing the font size and the padding. The other solution would be to reduce the amount of content, i.e. to remove a column, but that’s probably not an option.
Now about responsiveness: Small screens offer less available width, but the table requires a minimum width. The question is: What do you expect the browser to do? And there, the logical result is that the table overflows…
Now, for TablePress, there’s another idea that I have recently implemented in a so-called TablePress Extension. Please see https://tablepress.org/extensions/responsive-tables/ for more. This extension will use some CSS code, wrapped in media queries to basically flip the table to the side on small screens and add a horizontal scrolling feature. Maybe that a solution for your table as well…
Regards,
Tobias
