search

Mottie / tablesorter

Github fork of Christian Bach's tablesorter plugin + awesomeness ~
https://mottie.github.io/tablesorter/docs/
2.61k stars 754 forks source link

Override tr / td color #1591

Open zoriax opened 5 years ago

zoriax commented 5 years ago

Hi @Mottie,

Is there a way to override the color of tr/td when zebra widget is used ? I really need to use bootstrap colors on certain tr/td but it's seems it's not possible when zebra is used !

Thanks for your help !

Mottie commented 5 years ago

Hi @ciadch!

Because the built-in css themes have a really high css specificity, to allow nested tables to have a different theme, you'll need to add an even higher specificity selector to restore the background colors (demo):

.tablesorter-bootstrap:not(.table-dark) > tbody > tr.even > td.alert-danger,
.tablesorter-bootstrap:not(.table-dark) > tbody > tr.odd > td.alert-danger {
  background-color: #f8d7da;
}

.tablesorter-bootstrap:not(.table-dark) > tbody > tr.even > td.alert-warning,
.tablesorter-bootstrap:not(.table-dark) > tbody > tr.odd > td.alert-warning {
  background-color: #fff3cd;
}

.tablesorter-bootstrap:not(.table-dark) > tbody > tr.even > td.alert-success,
.tablesorter-bootstrap:not(.table-dark) > tbody > tr.odd > td.alert-success {
  background-color: #d4edda;
}
zoriax commented 5 years ago

Hi @Mottie ,

It's what I suspected... So thank you very much, I'll explore this.

Cheers