CSS样式不适用于表格答案

【问题标题】：Css style not applying to tableCSS样式不适用于表格
【发布时间】：2018-07-07 18:03:58
【问题描述】：

我有一个表格似乎没有采用某些样式，无论它们是在外部样式表中还是嵌入的。

我在 head 标签内添加了一个脚本，然后仍然在 head 标签内设置了选择器 h4 的样式。

这些不适用于实际表格中的 h4 部分，我不确定我做错了什么。

我在外部样式表中还有一个主选择器，它应该在表格之外添加背景颜色，但它没有这样做。但它也不适用于表格。

【问题讨论】：

最好将代码显示为文本格式而不是图像。
外部样式表是否适用于其他组件（不是表格）？
在这里复制/粘贴代码会更容易。使其更易于阅读和调整；）

标签： html css html-table

【解决方案1】：

你的h4无法设置样式的问题是因为

<h4><th>hello world</th></h4>

h4 { color: red; }

<h1>Table 1</h1>
<table>
  <tr>
    <h4><th>Firstname</th></h4>
    <h4><th>Lastname</th></h4>
    <h4><th>Age</th></h4>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

h4 应该在您的表格标题内

<th><h4>hello world</h4></th>

h4 { color: red; }

<h1>Table 2</h1>
<table>
  <tr>
    <th><h4>Firstname</h4></th>
    <th><h4>Lastname</h4></th> 
    <th><h4>Age</h4></th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

【讨论】：

【解决方案2】：

把h4标签放在td标签里面

您的代码：

<h4><td>The Fantastic Four</td><h4>
...
<h4><td>The Avengers</td><h4>
...
<h4><td>Justice League</td><h4>
...

试试：

<td><h4>The Fantastic Four</h4><td>
...
<td><h4>The Avengers</h4><td>
...
<td><h4>Justice League</h4><td4>
...

【讨论】：