样式表阻止表格单元格填充工作

Question

我正在编写一个基于他人样式表的网页。样式表包括以下内容：

table {
    border-collapse: collapse;
}
th, td {
    padding: 0;
}

现在我想创建一个具有非零单元格填充的表。但是我在重写这个样式表时遇到了问题：

<table cellpadding="10">
  <tr>
    <td padding="10">
      Foo
    </td>
    ...
  ...
  </tr>
</table>

上述工作均未完成；单元格填充保持为零。

如何覆盖样式表（除了使用不同的样式表）？

Answer 1

您可以执行联机样式：

<td style="padding: 10px">

或者为table分配一个类并为其创建一个规则：

<table class="table">
  <tr>
    <td>
      Foo
    </td>
  </tr>
</table>

以及用于此的CSS：

table td {
    padding: 10px;
}

Answer 2

尽量在选择器中更加具体，例如

table td {
    padding:10px;
}

以上内容将覆盖

 th, td {
    padding: 0;
}

点击此处了解有关CSS特定性的更多信息。

Answer 3

只需内联必要的样式：

<table style="border-collapse: separate; border-spacing: 10px;">
...
</table>

如果你这样做，你也不需要td上的padding="10"。看见http://jsbin.com/exovat/edit#html作为一个工作示例。

内联样式的另一种选择是，如果您可以访问在样式表之后加载的自定义样式表。然后，您可以在表上设置一个id，如<table id="foo">，然后在自定义样式表中覆盖它们的样式，如下所示：

table#foo {
    border-collapse: separate;
    border-spacing: 10px;
}

[注意：border-spacing css属性不适用于IE7或更低版本；如果您需要支持这些浏览器，最好使用一些更破解的方法]

Answer 4

您可以使用内联样式（即在元素上声明的样式）、内联样式表（即在同一页面中声明但不直接在元素上宣布的样式）或外部样式表。不幸的是，CSS样式在大多数情况下都会覆盖属性（我认为像您在这里使用的属性是不推荐的，这意味着本质上使用样式表）。

Answer 5

为表创建一个新类，并将其仅应用于您想要具有此样式的表。

table {
    border-collapse: collapse;
}
th, td {
    padding: 0;
}
table.newStyle { padding:10px; }

<table class="newStyle">
  <tr>
    <td padding="10">
      Foo
    </td>
    ...
  ...
  </tr>
</table>