CSS - 无法使 CSS 类正常工作，但内联样式确实有效

Question

我正在尝试将网站转换为使用 CSS 样式，而不是在表格元素上使用诸如“width=100%”之类的标签值。

所以，我创建了各种类，其中大部分都可以按我的意愿工作，但我无法让其中一个工作，也不知道为什么。

具体来说，我创建了一个类如下：

.w_100{width:100%;}

然后将其应用于表格：

<table class="w_100"> ....

但表格的宽度永远只显示为表格内内容的宽度，远小于 100%。

但是，我注意到如果我使用内联样式：

<table style="width:100%"> ....

然后一切都按我的预期工作，但我真的更愿意使用这个类。

所以，我想知道这是什么愚蠢的事情，我必须错过或误解，以至于班级没有按照我的预期去做。关于如何让它工作的任何建议？

非常感谢。谢谢！

Answer 1

这是对您的代码的测试，我已为表格元素 black 着色，以便您可以看到 table。请参阅下面的代码完全按预期运行。

.w_100 {
  width: 100%;
  background: black;
  color: white;
}

<table class="w_100">
  <tr>
    <td>How wide are you?</td>
    <td>I'm a 100% mofo!</td>
  </tr>
</table>

您可以做的另一个测试是检查是否有任何东西覆盖它。右键单击表格元素并检查该元素。

如果您使用的是 chrome 或大多数浏览器，右键单击上下文菜单会显示 Inspect。

如果您检查元素并检查样式面板，您应该能够看到任何可能覆盖表格宽度的内容。

它应该是这样的......