background-color css属性在表中不起作用

Question

这是html和CSS代码：

  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> 

产量

此处未显示类别hi的背景色蓝色，因此可能是什么原因以及可能的解决方案

Answer 1

您不能在表格中使用div进行样式设置。 只需将类应用于tr本身

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

如果将div用作单元格值以外的其他值，则会导致浏览器行为异常。

将标题行定义环绕thead标签，然后设置样式。 不要忘了，然后包裹身体周围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

在div添加div th,td它将不在外部工作

  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

将班级移至第四名是否可以满足您的需求？

 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

我认为您想做的是更改<tr>背景，您可以通过删除<div>并将类提供给<tr>标记轻松地实现。 如下：

<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>

和您的CSS相同。

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

如果可以更改html，则可以使用thead，tbody的组合为表头和主体设置不同的颜色。

例

<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>

所有tr中tbody将有背景蓝色。

否则，您必须分别为tr和th使用样式