[Plugin: WP-Table Reloaded] Multiple table headers

Hi Harrison,

thank you for your question.

Unfortunately, what you want is not that easy. This is however not a limitation of WP-Table Reloaded, but of the way how tables on websites work. The current standard does not allow for multiple headers as far as I know, so this simply means that browsers don’t have a way to show multiple headers.
Now, this is the theory when using the “real” table headers, which are a special HTML element. You could however create “fake” table headers in your table. This simply means to take a regular table row and use CSS styling to style that row so that it matches the styling of the header row. Do you know what I mean?

Regards,
Tobias

Wow – thanks for the speedy reply! Not my usual experience of forums…

Yes, I agree about the limitations of html table headers and am happy to simple add a class to a row to give the correct styling. If I setup this class in my theme’s stylesheet how can I go about adding the class to a specific row? Can it be done in the WP-Table Reloaded plugin page? I want to avoid hacks at all costs since the content for the site I need this for will be added by individuals that aren’t particularly familiar with HTML or the WordPress system.

Harrison

* happy to simply add a class…

Hi Harrison,

> * happy to simply add a class…

And this is where the problems start ?? Unfortunately, there is no simple way to add a class to a table row (there’s simply no UI for this in the plugin). Instead, you will need to use the row number based selectors.
For example, to style row 5 of table 3, you would use

.wp-table-reloaded-id-3 .row-5 td {
  background-color: #ff0000!important;
}

Regards,
Tobias

That is a shame! I have however found a solution: I realise that all the rows I wish to style like headers span two rows so I can simply target
td[colspan="2"] { ... }
Thought you might be interested!

Thanks for all your help and your great plugin.

Regards,
Harrison

Hi,

yeah, sorry ?? There’s no real need for the possibility to add custom CSS classes to rows, and it just makes the UI more complicated, therefore I simply didn’t implement it.

Nice idea with the colspan targeting, I like that. By the way, this would actually give you a CSS class then, because colspanned cells also get the colspan-2 class.

So, instead of the td[colspan="2"] { ... }, which might not always work on older browsers, you should use

.wp-table-reloaded .colspan-2 { ... }

(I also like to prepend the table class to table related CSS code, so that it does not interfere with other code.)

Best wishes,
Tobias

That’s perfect. Thanks for the tip about the classes – makes it safer for browsers.

Thanks again for all your help. I wish all developers were this helpful…

Harrison

Hi,

no problem, you are very welcome! ??

Regards,
Tobias