Child Theme updated to HTML5 – TablePress Custom CSS No longer working

Hi,

thanks for your post, and sorry for the trouble.

Please post a link to the page with your table, so that I can take a direct look. Thanks!

Regards,
Tobias

Update – I saw on another post that you should try switching to one of the WordPress themes to see if that solved the problem. I did that and the table is formatted properly so it has to be the HTML5 stuff.

Here is an example on my site: https://www.maxmyshopping.com/wp/bogo-harris-teeter-0924/

Please let me know if you need anything else. If necessary, I can revert back to the “pre-HTML5” version of my child theme. I really NEED these tables to work.

Hi,

thanks for the link.

From what I can see, the “Custom CSS” is picked up just fine, but it’s not really useful. For example, you are setting some column widths, which caused the table to be too narrow. Then, the padding that you have set is messing with the positioning of the sorting arrows.

Instead of trying to fix your existing “Custom CSS”, I’d therefore actually suggest that we make a fresh start, as most of the “Custom CSS” should no longer be necessary due to the new theme.
So, I’d suggest that you remove all of the “Custom CSS” that you have now (but keep a backup copy), and then please describe what you then want to change. That will allows us to find the best and shortest code to achieve that in the new theme.

Regards,
Tobias

OK – I will try that and get back to you. Mostly I just want 1 line per row unless absolutely necessary to wrap so the font size, padding, and column widths are mostly what I need to change.

Later… and thanks for the speedy response.

B.

Hi,

thanks for the clarification.

Then this should indeed be the best approach. Please remove everything from the “Custom CSS” that is related to table 6 and then only add this

.tablepress-id-6 th,
.tablepress-id-6 td {
  padding: 4px;
  font-size: 90%;
}

For the other tables, you should also remove the relevant CSS and then see whether you actually need to make adjustments then.

Regards,
Tobias

I thought I wouldn’t have time to do this till later but I went ahead. Here is the result on the page I previously sent: https://www.maxmyshopping.com/wp/bogo-harris-teeter-0924/

which is better but I would like to control which column wraps so I need to adjust font size, padding, and column width (i presume-instruction would be appreciated if I am wrong). Like in this example, I want the store name NOT to wrap and the Description column could wrap a little more but not exceed 2 lines in most cases.

https://www.maxmyshopping.com/wp/b1g1-deals-925-101/

Thanks.

Hi,

for table 6 (from https://www.maxmyshopping.com/wp/bogo-harris-teeter-0924/ ), please try the code that I posted in my previous post.

For table 8, please add

.tablepress-id-8 th,
.tablepress-id-8 td {
  padding: 4px;
  font-size: 90%;
}
.tablepress-id-8 .column-1 {
  white-space: nowrap;
}

Regards,
Tobias

PERFECT!!!
Now it works just fine.
You are the best!!

Hi,

no problem, you are very welcome! ?? Good to hear that this helped!

Best wishes,
Tobias

P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!