Responsive Tables Plugin – Collapse works on shrink, acts poorly when enlarged

Thank you so much for making and supporting your TablePress plugin and extensions!

Here’s the problem I’m having with TablePress and its Responsive Tables Plugin:

I created a 5-column table here:
http://belmontdramaticclub.org/spring

using this shortcode:
[table id=21 column_widths=”15%|15%|10%|10%|50%” responsive=”collapse” /]

And I’ve learned to test the mobile responsiveness in two ways:
– on my regular computer, by squeezing my web browser’s window width with my mouse,
– on my regular computer, by changing the User Agent option in my browser to a mobile choice like “Safari for iOS,” and
– on an iOS or Android phone or tablet.

The good news:
– On my computer, when I squeeze my browser’s window width, the table responds beautifully by shrinking the column widths and eventually stacking and collapsing.
– On a phone or tablet, when I land on my website, the table is already stacked and/or collapsed appropriately, whether I’m in landscape mode (screen is wide and short) or portrait mode (screen is narrow and tall).
– On a phone or tablet, if I start out in landscape mode and switch to portrait (making the screen narrower), the table gets even narrower and still looks great!

The bad news:
– On my computer, having already squeezed my browser’s window width, if I then expand the width back to regular size (most of my 15″ laptop screen’s width), the table does not “recover” properly. The collapsed “plus signs” disappear and the last (widest) column reappears, but all of the column widths are still very narrow, and they only return to their original widths when I Refresh the page.
– Similarly, on a phone or tablet, if I switch from portrait mode to landscape mode (making the screen get wider), I see exactly the same behavior, where the columns remain unnecessarily narrow, and the only “fix” is to Refresh the page.

In case it’s relevant, the only CSS overrides I’ve done are:

/* for all tables: */
/* override table header & footer background color to white */
.tablepress thead th,
.tablepress tfoot th {
background-color: #ffffff;
}

/* override table odd row background color to grey */
.tablepress .odd td {
/* background-color: #DCDBE4; */
}

/* override table odd row background color to grey */
.tablepress .even td {
/* background-color: #DCDBE4; */
}

/* override table background color to grey */
.tablepress tbody td {
background-color: #DCDBE4;
border-spacing: 0; /* cellspacing */
padding: 0; /* cellpadding */
border: 3px solid #ffffff;
}

/* for specific tables: */
/* override table #21: Spring Show Characters, rows #2, 9, & 14 (e.g., “Principal Male Roles”) background color to white */
.tablepress-id-21 .row-2 td,
.tablepress-id-21 .row-9 td,
.tablepress-id-21 .row-14 td {
background-color: #ffffff;
}

Thanks for any advice you can give me about how I might solve this problem.

Martin

https://wordpress.org/plugins/tablepress/