[Plugin: WP-Table Reloaded] Too many tables CSS causing indexing issues

Hi,

thanks for your post.

For this, the best option would be to use an “Extra CSS class”, which can really help in reducing the amount of CSS. Please take a look at https://www.ads-software.com/support/topic/plugin-wp-table-reloaded-is-there-a-way-to-shorten-this-css where I explain how to use this.

Another idea would then be to move the CSS to a file, and then load that in the “Custom CSS” textarea with a CSS @import command.

Regards,
Tobias

I read the other link, however not having much previous experience with doing custom CSS work, can you give me a bit more of an example of what im adding to my stylesheet?
I’ve got a similar situation with OP about having multiple tables that i need formated all the same way. On my site I will only have 2 types of tables. One is a generic table and all the vanilla settings work great. The other is a bit more specific and is where im running into an issue. I will have about 60 of the vanilla style tables, and several hundred of the fancy tables.

reading the other link Im a bit confused the difference between what im putting in the style.css file versus in the ‘custom CSS’ field in wp-table reloaded.

My situation is a bit eaiser than OPs… All I need to share amongst a few hundred different tables is:

.wp-table-reloaded-id-6 .column-1 {
  width: 15px;
}.wp-table-reloaded-id-6 .column-2 {
  width: 45px;
}
.wp-table-reloaded-id-6, .wp-table-reloaded-id-6 td, .wp-table-reloaded-id-6 th {
  border: none!important;
  border-collapse: collapse!important;
  border-spacing: 0px!important;
}

(once I figure out whats going on with the width problem Im having in my other post here)

Hi,

thanks for your post.

As you have two different styles, where one of them is the default styling, you’ll basically just need one “Extra CSS class” for the fancy style tables, for example

wp-table-reloaded-fancy-style

Just put that into the “Extra CSS class” field on the “Edit” screen for each table that shall get the fancy styling.
In your “Custom CSS” code, you can then use this Extra CSS class, instead of the individual table classes. So, your code would become

.wp-table-reloaded-fancy-style .column-1 {
  width: 15px;
}.wp-table-reloaded-fancy-style .column-2 {
  width: 45px;
}
.wp-table-reloaded-fancy-style,
.wp-table-reloaded-fancy-style td,
.wp-table-reloaded-fancy-style th {
  border: none!important;
  border-collapse: collapse!important;
  border-spacing: 0px!important;
}

The difference between putting the CSS into the “style.css” or the “Custom CSS” textarea on the “Plugin Options” screen of WP-Table Reloaded basically is caching. style.css has advantages here. However, in the “Custom CSS” textarea, the code is easier to maintain, as it will for example be safe when the theme is changed or updated.
As your CSS code will likely be rather short, putting it in the “Custom CSS” textarea should be the better option for now.

Regards,
Tobias

Hi Tobias,

when ik do the instructions like above, the extra CSS takes also the CSS of the order CSS code.

[CSS moderated as per the Forum Rules. Please just post a link to your site.]

.wp-table-reloaded-overzicht takes also the row 4-12 of .wp-table-reloaded. Do you know how that happends ???

Regards,
Mathijs

He uses this code :

.wp-table-reloaded .row-1 td {
   font-weight: bolder!important;
}

.wp-table-reloaded .row-2 td {
   font-weight: bolder!important;
}

also at :

.wp-table-reloaded-overzicht .row-43 td {
   font-weight: bolder!important;
}

.wp-table-reloaded-overzicht .row-44 td {
   font-weight: bolder!important;
}

In the CSS of wp-table-reloaded-overzicht row 1 and 2 are also Bold. But i didn’t edit that in the CSS.

Hi,

this probably happens, because .wp-table-reloaded is a class of all tables, including those that have the extra CSS class .wp-table-reloaded-overzicht.
So, to make this really safe, you might need to introduce another extra CSS class, for those tables that don’t have one yet.
Or, you could try to make the commands of the .wp-table-reloaded-overzichtmore important, by appending the !important keyword after each command.

Regards,
Tobias

Hi Tobias,

i renamed .wp-table-reloaded to .wp-table-reloaded-uitslag
Now it al works. I only have to put that into the “Extra CSS class” field on the “Edit” screen for each table that shall get the styling for it.

Thanks for all.

Hi,

yes, that’s exactly what I meant ?? Great that it works. (And although it seems like an extra step, it really is the cleanest solution.)

Best wishes,
Tobias