background-color css property not working in table

Question

Here is html and CSS code:

  table,th,td{ border:1px solid blue; border-collapse:collapse; } td{ text-align:center; } td{padding:10px; color:#cc7722; } table{ border-spacing:5px; background-color:yellowgreen; font-weight:bold; width:100% } #hello{ color:red; } .hi{ background-color:blue; } 

  <table> <caption id="hello">Employee Data</caption> <tr> <div class="hi"> <th>Employee Name</th> <th> Department </th> <th>Salary</th> </div> </tr> <tr> <td>Vaibhav</td> <td>CSE</td> <td>10000</td> </tr> </table> 

Output

Here background color blue for class hi not shown so what can be the reason and what is the possible solution for this

Answer 1

you can't use a div within a table for styling. just apply the class to the tr itself

html

 <table>
   <caption id="hello">Employee Data</caption>
   <tr class="hi">
     <th>Employee Name</th>
     <th>Department</th>
     <th>Salary</th>
   </tr>
   <tr>
     <td>Vaibhav</td>
     <td>CSE</td>
     <td>10000</td>
   </tr>
</table>

Answer 2

If you use div as anything other than a cell value, you'll get misbehaving browsers.

Wrap your header row definition around the thead tag and style that instead. Don't forget to then wrap the body around tbody .

 table, th, td { border: 1px solid blue; border-collapse: collapse; } td { text-align: center; } td { padding: 10px; color: #cc7722; } table { border-spacing: 5px; background-color: yellowgreen; font-weight: bold; width: 100% } #hello { color: red; } .hi { background-color: blue; } 

 <table> <caption id="hello">Employee Data</caption> <thead class="hi"> <tr> <th>Employee Name</th> <th> Department </th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td>Vaibhav</td> <td>CSE</td> <td>10000</td> </tr> </tbody> </table> 

Answer 3

您的表中不应包含div，而您必须这样做：

<tr class="hi">

Answer 4

add div inside th,td it'll work not outside

  table,th,td{ border:1px solid blue; border-collapse:collapse; } td{ text-align:center; } td{padding:10px; color:#cc7722; } table{ border-spacing:5px; background-color:yellowgreen; font-weight:bold; width:100% } #hello{ color:red; } .hi{ background-color:blue; } 

  <table> <caption id="hello">Employee Data</caption> <tr> <th>Employee Name</th> <th> Department </th> <th>Salary</th> </div> </tr> <tr> <td><div class="hi">Vaibhav</div></td> <td>CSE</td> <td>10000</td> </tr> </table> 

Answer 5

Does moving the class to the th accomplish what you are wanting?

 table,th,td{ border:1px solid blue; border-collapse:collapse; } td{ text-align:center; } td{padding:10px; color:#cc7722; } table{ border-spacing:5px; background-color:yellowgreen; font-weight:bold; width:100% } #hello{ color:red; } .hi{ background-color:blue; } 

 <table> <caption id="hello">Employee Data</caption> <tr class="hi"> <th >Employee Name</th> <th> Department </th> <th>Salary</th> </tr> <tr> <td>Vaibhav</td> <td>CSE</td> <td>10000</td> </tr> </table> 

Answer 6

I think what you want to do is changing the <tr> background, which you can easily accomplish by removing your <div> and giving the class to your <tr> tag. As the following:

<table>
      <caption id="hello">Employee Data</caption>
      <tr class="hi">
        <th>Employee Name</th>
        <th>Department</th>
        <th>Salary</th>
      </tr>
      <tr>
        <td>Vaibhav</td>
        <td>CSE</td>
        <td>10000</td>
      </tr>
</table>

And your CSS is just the same.

table,th,td{
  border:1px solid blue;
  border-collapse:collapse;
}
td{
  text-align:center;
}
td{padding:10px;
  color:#cc7722;
}
table{
  border-spacing:5px;
  background-color:yellowgreen;
  font-weight:bold;
  width:100%
}
#hello{
  color:red;
}
.hi{
  background-color:blue;
}

Answer 7

If possible to change html then You can use combination of thead, tbody to set different colors to table head and body.

Example

<style>
thead {color:green;}
tbody {background:blue;}
tfoot {color:red;}

table, th, td {
border: 1px solid black;
}
</style>


   <table>
  <thead>
  <tr>
     <th>Month</th>
     <th>Savings</th>
  </tr>
  </thead>
  <tfoot>
  <tr>
      <td>Sum</td>
      <td>$180</td>
  </tr>
  </tfoot>
  <tbody>
  <tr>
     <td>January</td>
     <td>$100</td>
  </tr>
  <tr>
      <td>February</td>
      <td>$80</td>
  </tr>
  </tbody>
</table>

All tr in tbody will have background blue.

Otherwise you have to use styling for tr , th separately