背景颜色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单元格值以外的任何内容，则会导致浏览器行为异常。

将标题行定义包裹在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>