How can I use CSS in tr which has class in html?

user_13303505 0
Viewed 112

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

css html
1 Answers

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>

user_63908170
Related