2

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

1
  • elements inside table tags are indeed harder to control than the rest of the other tags Commented Jun 27, 2020 at 6:47

1 Answer 1

2

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>

Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.