覆盖现有 CSS 表格规则的最佳方法是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1519271/
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
What is the best way to override an existing CSS table rule?
提问by Maksee
We're using a template for joomla where creators defined the rule in constant.css
我们正在使用 joomla 的模板，其中创建者在 constant.css 中定义了规则
table
{
border-collapse:collapse;
border:0px;
width:100%;
}
When I need my own table with a custom params (width, border and so on), a nightmare begins. If I use general html params, they don't work since css rules are more important (CMIIW). If I use style= param, I suppose I can't control how the table looks for IE up to 7 inclusive.
当我需要我自己的带有自定义参数（宽度、边框等）的表格时，噩梦就开始了。如果我使用一般的 html 参数，它们将不起作用，因为 css 规则更重要（CMIIW）。如果我使用 style= param，我想我无法控制表格如何查找 IE 最多 7 个。
So is there a general approach to work around this or I just need to comment the rule (as I already did).
那么是否有解决此问题的通用方法，或者我只需要评论规则（就像我已经做过的那样）。
And also, am I right if I say that creators of joomla templates should not define such general rules as width:100% by default? I mean if they don't want users of their template to complain.
而且，如果我说 joomla 模板的创建者不应该默认定义像 width:100% 这样的一般规则，我说得对吗？我的意思是如果他们不希望他们的模板的用户抱怨。
回答by DisgruntledGoat
Method 1
方法一
Put a class on all tables that you create, and create a selector like table.classnamethat overrides the properties. Since you should only use tables for tabular data, adding a class name makes sense because it's easier to apply additional styles (colours, borders) to all your tables.
在您创建的所有表上放置一个类，并创建一个table.classname覆盖属性的选择器。由于您应该只将表格用于表格数据，因此添加类名是有意义的，因为可以更轻松地将其他样式（颜色、边框）应用于所有表格。
- To override
border-collapse: collapse, useborder-collapse: separatealong withborder-spacing: 4px(or whatever value). This doesn't work in IE6 and may not work in IE7 either. - For a border round the table just add a
borderrule. If you want borders on individual cells, targettable.classname tdand put theborderrule there. - To reset the width, use
width: autoor put an explicit width.
- 要覆盖
border-collapse: collapse，请使用border-collapse: separatewithborder-spacing: 4px（或任何值）。这在 IE6 中不起作用，在 IE7 中也可能不起作用。 - 对于桌子周围的边框，只需添加一条
border规则。如果您想要单个单元格的边框，请定位table.classname td并将border规则放在那里。 - 要重置宽度，请使用
width: auto或放置明确的宽度。
Method 2
方法二
An alternate method would be to find all the tables used in the template, add a class to them instead, and change the original rule to use that class. Then, any tables without that class will use the default table properties.
另一种方法是查找模板中使用的所有表，改为向它们添加一个类，然后更改原始规则以使用该类。然后，没有该类的任何表都将使用默认表属性。
This is probably going to be quite difficult to implement because Joomla templates often have module and component overrides, meaning there will be many tables in many places. Good luck! :p
这可能很难实现，因为 Joomla 模板通常具有模块和组件覆盖，这意味着在许多地方会有很多表。祝你好运！:p
You're correct, setting those styles (well, widthat least) on a generic table element is a bad idea for a template. Although the fact they're probably using tables for layout isn't a good sign anyway.
你是对的，width在通用表格元素上设置这些样式（至少）对于模板来说是个坏主意。尽管他们可能使用表格进行布局这一事实无论如何都不是一个好兆头。
回答by jerjer
table{
border-collapse:collapse;
border:0px;
width:100%;
}
table{
border-collapse:collapse;
border:0px;
width:100%;
}
The following should override the above css rule:
以下内容应覆盖上述 css 规则：
.classofyourtable
{
width:50%;
}
.classofyourtable
{
width:50%;
}
#idofyourtable
{
border:1px;
width:20px;
}
#idofyourtable
{
border:1px;
width:20px;
}
Please note also of the following CSS cascading precedence(1 being the highest):
另请注意以下 CSS 级联优先级（1 为最高）：
- inline
- ids
- class
- tagname
- 排队
- 身
- 班级
- 标签名称
Rules with less precedence will be overriden by the higher ones.
优先级较低的规则将被较高的规则覆盖。
回答by Olly Hodgson
There's a number of ways to do it. As Marius says, a class or ID will help.
有很多方法可以做到。正如 Marius 所说，类或 ID 会有所帮助。
Lets say you put an id on the body element (<body id="foo">), then you could override the built-in table style using
假设您在 body 元素 ( <body id="foo">)上放置了一个 id ，然后您可以使用
#foo table {
width: auto;
}
Or if you only want to restyle certain tables, try using a class (<table class="foo">):
或者，如果您只想重新设置某些表格的样式，请尝试使用类 ( <table class="foo">)：
table.foo {
width: 25em;
}
But yeah, why not just edit the template's CSS to do what you want?
但是，是的，为什么不直接编辑模板的 CSS 来做你想做的事呢？
回答by Marius
Applying the style to a class or id both override the style in the general tag style.
将样式应用于类或 id 都会覆盖通用标签样式中的样式。
回答by cllpse
Apply another rule below the existing one:
在现有规则下应用另一条规则：
table
{
background-color: Navy;
width: 100%;
}
/* override existing rule: */
table
{
width: 960px;
}
When a CSS rule is specified twice, the browser will use the last one.
And yes, you are correct--The proper way for Joomla go about this is to implement namespacing using classes. Overriding default CSS rules is bad practice.
当一个 CSS 规则被指定两次时，浏览器将使用最后一个。
是的，你是对的——Joomla 的正确方法是使用类实现命名空间。覆盖默认的 CSS 规则是不好的做法。
