Question

我们正在使用joomla的模板，其中创建者在constant.css中定义规则

table   
{
  border-collapse:collapse; 
  border:0px; 
  width:100%;
}

当我需要自己的桌子上有自定义参数（宽度，边框等）时，一场噩梦就开始了。如果我使用通用的html参数，它们不起作用，因为css规则更重要（CMIIW）。如果我使用style = param，我想我无法控制表格如何查找最高为7的IE。

有没有一种解决这个问题的一般方法，或者我只需要对规则进行评论（正如我已经做过的那样）。

而且，如果我说joomla模板的创建者不应该定义宽度这样的一般规则，我是否正确：默认为100％？我的意思是，如果他们不希望他们的模板用户抱怨。

Answer 1

方法1

在您创建的所有表上放置一个类，并创建一个覆盖属性的table.classname选择器。由于您只应将表用于表格数据，因此添加类名是有意义的，因为更容易将其他样式（颜色，边框）应用于所有表。

要覆盖border-collapse: collapse，请使用border-collapse: separate和border-spacing: 4px（或任何值）。这在IE6中不起作用，也可能在IE7中不起作用。
对于围绕桌子的边框，只需添加border规则。如果您需要单个单元格的边框，请定位table.classname td并将border规则放在那里。
要重置宽度，请使用width: auto或使用明确的宽度。

方法2

另一种方法是查找模板中使用的所有表，改为向它们添加类，并更改原始规则以使用该类。然后，没有该类的任何表将使用默认表属性。

这可能很难实现，因为Joomla模板通常具有模块和组件覆盖，这意味着许多地方会有很多表。祝好运！：P

你是对的，在通用表元素上设置这些样式（至少width）对于模板来说是个坏主意。虽然他们可能使用表格进行布局，但无论如何都不是一个好兆头。

Answer 2

table{ border-collapse:collapse; border:0px; width:100%; }

以下内容应覆盖上述css规则：

.classofyourtable { width:50%; }

#idofyourtable { border:1px; width:20px; }

还请注意以下CSS级联优先级（1为最高级别）：

优先级较低的规则将被较高的规则覆盖。

Answer 3

将样式应用于类或id都会覆盖常规标记样式中的样式。

Answer 4

有很多方法可以做到这一点。正如马吕斯所说，班级或身份证会有所帮助。

让我们假设您在body元素（<body id="foo">）上放了一个id，然后您可以使用

覆盖内置表格样式

#foo table {
    width: auto;
}

或者，如果您只想重新安排某些表，请尝试使用类（<table class="foo">）：

table.foo {
    width: 25em;
}

但是，为什么不编辑模板的CSS来做你想做的事呢？

Answer 5

在现有规则下面应用另一条规则：

table
{
    background-color: Navy;
    width: 100%;
}

/* override existing rule: */

table
{
    width: 960px;
}

当指定CSS规则两次时，浏览器将使用最后一个。

是的，你是对的 - Joomla的正确方法是使用类实现命名空间。覆盖默认的CSS规则是不好的做法。