Html 防止表格单元格填充工作的样式表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9006542/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Style sheet preventing table cellpadding from working
提问by Shaul Behr
I'm writing a web page based on someone else's stylesheet. The stylesheet includes the following:
我正在根据其他人的样式表编写网页。样式表包括以下内容：
table {
border-collapse: collapse;
}
th, td {
padding: 0;
}
Now I want to create a table that has a non-zero cell padding. But I am having trouble overriding this stylesheet:
现在我想创建一个具有非零单元格填充的表格。但是我无法覆盖此样式表：
<table cellpadding="10">
<tr>
<td padding="10">
Foo
</td>
...
...
</tr>
</table>
and none of the above works; the cell padding stays a tight zero.
以上均无效；单元格填充保持紧密的零。
How do I override the stylesheet (short of using a different stylesheet)?
如何覆盖样式表（缺少使用不同的样式表）？
回答by Zoltan Toth
You can do in-line styling:
您可以进行内嵌样式：
<td style="padding: 10px">
or assign a class to your tableand create a rule for it:
或为您分配一个类table并为其创建规则：
<table class="table">
<tr>
<td>
Foo
</td>
</tr>
</table>
and the CSS for this:
以及用于此的 CSS：
table td {
padding: 10px;
}
回答by Sotiris
回答by Ben Lee
Just inline the necessary styles:
只需内联必要的样式：
<table style="border-collapse: separate; border-spacing: 10px;">
...
</table>
If you do this, you don't need the padding="10"on the tdeither. See http://jsbin.com/exovat/edit#htmlfor a working example.
如果你这样做，你不需要padding="10"在td任。有关工作示例，请参阅http://jsbin.com/exovat/edit#html。
An alternative to inlining the styles is if you have access to your own custom stylesheet that loads after their stylesheet. Then you can set an id on the table like <table id="foo">and then just override their styles in your custom stylesheet like this:
内联样式的另一种方法是，如果您可以访问在样式表之后加载的自己的自定义样式表。然后你可以在表格上设置一个 id <table id="foo">，然后像这样在你的自定义样式表中覆盖它们的样式：
table#foo {
border-collapse: separate;
border-spacing: 10px;
}
[Note: The border-spacingcss property does not work with IE7 or below; if you need those browsers to be supported, you are better off using some hackier method]
[注意：border-spacingcss 属性不适用于 IE7 及以下；如果您需要支持这些浏览器，最好使用一些 hackier 方法]
回答by Chris
You could use inline styles (ie styles declared on the element), inline stylesheets (ie styles declared in the same page but not directly on elements) or external stylesheets. Unfortunately CSS styles override attributes in most cases (I believe attributes such as you are using here are deprecated, meaning in essence use stylesheets instead).
您可以使用内联样式（即在元素上声明的样式）、内联样式表（即在同一页面中声明但不直接在元素上的样式）或外部样式表。不幸的是，CSS 样式在大多数情况下会覆盖属性（我相信您在此处使用的属性已被弃用，这意味着本质上使用样式表）。
回答by Robert
Create a new class for the table and apply it only to the tables you want to have this style.
为表格创建一个新类，并将其仅应用于您想要具有此样式的表格。
table {
border-collapse: collapse;
}
th, td {
padding: 0;
}
table.newStyle { padding:10px; }
<table class="newStyle">
<tr>
<td padding="10">
Foo
</td>
...
...
</tr>
</table>
