[Plugin: TablePress] Custom CSS not working properly

Hi,

thanks for your post, and sorry for the trouble.

The reason for this is that your theme also contains CSS code that influences tables, and that CSS is added with a rather high priority. Therefore, you’ll just need to raise the priority of your “Custom CSS” a little bit, by extending the selector with #content.
Please change your “Custom CSS” to

#content .tablepress .odd td {
	background-color: #C9C9C9;
}

#content .tablepress .even td {
	background-color: #F3F4F5;
}

#content .tablepress .row-hover tr:hover td {
	background-color: #3CFF00;
}

#content .tablepress th,
#content .tablepress td {
	padding: 8px;
}
#content .dataTables_wrapper .sorting,
#content .dataTables_wrapper .sorting_asc,
#content .dataTables_wrapper .sorting_desc {
    padding-right: 20px;
}

(The CSS for the widths, that I removed is not necessary in its current form.)

Regards,
Tobias

Hi Tobias,

I have recently begun working on a PW site that uses your wonderful TablePress plugin, my only concern was when I tried customizing the Table. I actually tried to apply the solution you mentioned above but still no luck.

I simply tried using this short custom css I made to begin with:

#content .tablepress th {
background-color: #66CCFF;
color: #387d3d;
}

But as I said, it did not work unfortunately. Your immediate assistance would be greatly appreciated for I am currently rushing to finish this WP website project of mine.

Thanks for your time.

Hi,

thanks for your post, and sorry for the trouble.

To find out what’s wrong, I need to take a look at your site. Therefore, please post a link to the page with the table. Thanks!

Regards,
Tobias

Hello again and thanks for replying to my query… the site is https://www.pagargolf.org, just click on the LEADRBOARD nav link on the main nav bar.

Added note: I applied these using the Custom CSS form on the WP/TablePress Admin page.

Thanks again for your help.

@bon38, please ensure your website is available to view.

Hi,

yes, it’s not working for me either ?? I get a “330 Unknown Error”.

Regards,
Tobias

Hi Tobias

Ok so you were able to access the website https://www.pagargolf.org? It wont work from your end as well?

Hi,

I’m not able to access https://www.pagargolf.org at all. I only get a an error:

Content Encoding Error
The page you are trying to view cannot be shown because it uses an invalid or unsupported form of compression.

(in different and up-to-date webbrowsers). There’s some server issue going on, I assume.

Regards,
Tobias

hello Tobias,

That is indeed unusual for we were able to access it yesterday and just early this morning. Will check it out later tonight and talk to our Hosting Provider. This is definitely bad news.

Will contact you again soon. Thanks again for your help.

Hi,

yes, probably a temporary server glitch. Your hosting provider should be able to help.
Just post here again, once you’ve sorted this out.

Regards,
Tobias

Just wanted to say that after reading approximately 7000 posts on the tablepress custom table width not being respected, I found here that adding “#content” to raise the custom css finally fixed it. Tobias, your answers everywhere I look are immensely helpful, thank you.

Hi Scott,

thanks for your post. Sorry to hear that you had those CSS troubles…

Yes, unfortunately, some themes have their own CSS for tables, and then are pretty drastic about setting it, for example with that extra #content CSS ID in the code ?? Unfortunately, that’s not the same code for every theme, which makes it so difficult to find a solution that works everywhere. So, it’s really great to hear that you found the solution for your theme! ??

Best wishes,
Tobias

I want a smaller table row height here, and I’ve added this to my Custom CSS file:

#content .tablepress th,
#content .tablepress td {
	padding: 0px;
}

But it looks the same whether padding is 0px, 10px or 100px. I can’t change the color of the table with the Custom CSS file either. I’ve looked for a few hours, and I’m running out of ideas! Any help would be appreciated.

Hi,

thanks for your post. That table (with all the form elements) was not created with TablePress, and therefore, the “Custom CSS” does not work.
However, some slightly more general “Custom CSS” will affect this table (and all other tables on the site that were not created with TablePress):

table th,
table td {
	padding: 0px;
}

Regards,
Tobias

Thanks, that did it …and sorry for the bum steer. I’m in the middle of a conversion from MS Expression Web… I lost track of what tables I copied vs. created with Tablepress. Thanks to plugins like yours, I think I’m going to like WP a lot more than EW!

I like your tag-line… code IS poetry!