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特异性的更多信息here。

Answer 3

只需内联必要的样式：

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

如果您这样做，则padding="10"上也不需要td。有关工作示例，请参阅http://jsbin.com/exovat/edit#html。

内联样式的另一种方法是，您可以访问自己的样式表后加载的自定义样式表。然后你可以像<table id="foo">那样在表格上设置一个id，然后在你的自定义样式表中覆盖它们的样式：

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>

样式表防止表cellpadding工作

5 个答案: