The following CSS is not affecting <tr class="header"> which has class header
CSS
table.table-bordered tr:hover{ background-color: #C0C0A9; } table.table-bordered tr { background-color: #C0C0D9; } What can I change there in order to affect
Please anyone can help me
We can explicitly use !important property in css, but in most cases it is not necessary. But, in your as you said background-color is not applied, in that case, we can use it. Find the Working code below :
table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } table.table-bordered tr { background-color: #C0C0D9 !important; } table.table-bordered tr:hover { background-color: #C0C0A9 !important; }<!DOCTYPE html> <html> <body> <h2>HTML Table</h2> <table class="table-bordered"> <tr class="header"> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr class="header"> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr class="header"> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr class="header"> <td>Ernst Handel</td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr class="header"> <td>Island Trading</td> <td>Helen Bennett</td> <td>UK</td> </tr> </table> </body> </html>