We are using wpDataTables for different kinds of tables on the same website, and need to format them differently.
Specifically, one kind of table needs to have zebra-striped even and odd rows, which we implement with the built in formatting options (wpDataTables Main Settings).
But now we have a different kind of table which needs just white background, or maybe a very subtle zebra-stripe effect in a different color.
We tried achieving this by setting up a CSS class in the wpDataTables settings, like so:
But nothing happens. When we deactivate the color settings on the main settings section of wpDataTables, it still doesn´t work, because then the wpDataTables skin comes through, which we have set to "Light" (which has its own ideas about how to zebra-stripe the tables). When we change the skin setting to "Material", we can get our own custom CSS zebra-stripes to work, but other settings that are important for our layout change in a way we don´t want.
It appears the "Main Settings" section has "priority 1", the wpDataTables skin has "priority 2", and only if those two have no settings regarding the row background, can I set those myself with CSS.
How can we get around this? It´s really important to be able to format different tables differently...
.wpdt-c tr.odd > td {
background-color: blue !important;
}
.wpdt-c tr.even > td {
background-color: green !important;
}
This changes the color of odd rows to blue, and the color of even rows to green. You can modify it to your needs as you wish, of course. There's also an option to modify the hover color of rows:
Hello!
We are using wpDataTables for different kinds of tables on the same website, and need to format them differently.
Specifically, one kind of table needs to have zebra-striped even and odd rows, which we implement with the built in formatting options (wpDataTables Main Settings).
But now we have a different kind of table which needs just white background, or maybe a very subtle zebra-stripe effect in a different color.
We tried achieving this by setting up a CSS class in the wpDataTables settings, like so:
table.wpDataTable tr.class_zebra_rows:nth-child(even){
background-color: #fff8d6 !important; }
But nothing happens. When we deactivate the color settings on the main settings section of wpDataTables, it still doesn´t work, because then the wpDataTables skin comes through, which we have set to "Light" (which has its own ideas about how to zebra-stripe the tables). When we change the skin setting to "Material", we can get our own custom CSS zebra-stripes to work, but other settings that are important for our layout change in a way we don´t want.
It appears the "Main Settings" section has "priority 1", the wpDataTables skin has "priority 2", and only if those two have no settings regarding the row background, can I set those myself with CSS.
How can we get around this? It´s really important to be able to format different tables differently...
Thank you!
Hi again Florian.
This is possible with some custom CSS:
.wpdt-c tr.odd > td { background-color: blue !important; } .wpdt-c tr.even > td { background-color: green !important; }This changes the color of odd rows to blue, and the color of even rows to green. You can modify it to your needs as you wish, of course. There's also an option to modify the hover color of rows:
.wpdt-c tr.odd:hover > td { background-color: red !important; } .wpdt-c tr.even:hover > td { background-color: yellow !important; }Now, to implement this only to a single table, you need to put this code above the table's shortcode, when you're creating the page:
<style> .wpdt-c tr.odd > td { background-color: blue !important; } .wpdt-c tr.even > td { background-color: green !important; } </style> [wpdatatable id=1]I hope this helps.
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables