Question

这是html和CSS代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Output

这里的背景颜色为蓝色，未显示 那可能是什么原因什么是这个

的可能解决方案

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内添加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

background-color css属性不在表中工作

7 个答案: