Force responsive view at certain width

Hi,

thanks for your post, and sorry for the trouble.

You could maybe try forcing a minimum width on that column. For that, please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress-id-123 .column-10 {
  min-width: 200px !important;
}

Please adjust table ID, column number, and width as necessary, for that column.

Regards,
Tobias

Hi, thanks for the help, but I really don’t want to have to go in each time and have to adjust each id, and column # as I have many tables on my website that get added and deleted each week and they all have different column # that would have to be adjusted.

Is there just a way to force all tables to change to “collapse” (responsive) view when the browser is resized to 1200px?

• This reply was modified 5 years, 9 months ago by omg5.

Hi,

no, sorry, I’m not aware of such a setting. This behavior is simply a consequence of how the external JS library works.

Regards,
Tobias

ok but I guess I don’t understand. On your coding don’t you have to set a point at which you have to have the responsive view to take over? Couldn’t you allow custom CSS to change that point where responsive view takes over? Thanks.

Hi,

no, that’s not how the collapse mode works. It basically tries to fit as many columns as possible. Then, when it finds that a column will not fit the available width, that column is collapsed and hidden. Therefore, this is totally independent from any breakpoints.

Regards,
Tobias

ok I think I found a reasonable workaround. I added 30% padding on the left & right side of that row that hold the table. This forces the responsive view on any browser size. I also had to remove that padding on my mobile devices with this CSS:

@media screen and (max-width: 767px) {
.custom_no_padding_mob .full_section_inner {
padding: 0 5% !important;
}
}

You may want to recommend this as an option for others in the future – hope it can help.

One final issue I am having is that if I add a background on that row where the table is – when one of the rows is opened (using collapse responsive view) the background is transparent (on both mobile and desktop view) so the colored background shows through and I can’t see the text well. How do I make the background of an opened row white?

Hi,

good to hear that you found a way!

Regarding that background color issue: Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

Regards,
Tobias

Yes here is the page https://tinyurl.com/y5vfsm93

Hi,

thanks for the link!

Can you please try extending the first block of “Custom CSS” from

.tablepress tbody td {
	font-size: 15px;
}

to

.tablepress tbody td {
	font-size: 15px;
	background-color: #eeeeee;
}

Regards,
Tobias