Use table row coloring for cells in Bootstrap

Question

Twitter Bootstrap offers classes to color table rows like so:

<tr class="success"> 

I like the color choice and the class naming. Now what I would like to do, is to re-use these classes and apply them on table cells, too. Obviously, I could define my own classes with the same colors and be done with it.

But is there a shorthand in CSS. LESS, to let the td inherit the classes?

Answer 1

You can override the default css rules with this:

.table tbody tr > td.success {   background-color: #dff0d8 !important; }  .table tbody tr > td.error {   background-color: #f2dede !important; }  .table tbody tr > td.warning {   background-color: #fcf8e3 !important; }  .table tbody tr > td.info {   background-color: #d9edf7 !important; }  .table-hover tbody tr:hover > td.success {   background-color: #d0e9c6 !important; }  .table-hover tbody tr:hover > td.error {   background-color: #ebcccc !important; }  .table-hover tbody tr:hover > td.warning {   background-color: #faf2cc !important; }  .table-hover tbody tr:hover > td.info {   background-color: #c4e3f3 !important; } 

!important is needed as bootstrap actually colours the cells individually (afaik it's not possible to just apply background-color to a tr). I couldn't find any colour variables in my version of bootstrap but that's the basic idea anyway.