覆盖现有 CSS 表格规则的最佳方法是什么?

问题描述

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

We're using a template for joomla where creators defined the rule in constant.css

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

当我需要我自己的带有自定义参数(宽度、边框等)的表格时，噩梦就开始了.如果我使用一般的 html 参数，它们将不起作用，因为 css 规则更重要(CMIIW).如果我使用 style= param，我想我无法控制表格如何查找 IE 最多 7 个.

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.

那么有没有通用的方法来解决这个问题，或者我只需要评论规则(就像我已经做过的那样).

So is there a general approach to work around this or I just need to comment the rule (as I already did).

而且，如果我说 joomla 模板的创建者不应该默认定义像 width:100% 这样的一般规则，我说得对吗?我的意思是如果他们不希望他们的模板用户抱怨.

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.

推荐答案

方法一

在您创建的所有表上放置一个类，并创建一个选择器，如覆盖属性的 table.classname.由于您应该只将表格用于表格数据，因此添加类名是有意义的，因为可以更轻松地将其他样式(颜色、边框)应用于所有表格.

Method 1

Put a class on all tables that you create, and create a selector like table.classname that 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.

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

• To override border-collapse: collapse, use border-collapse: separate along with border-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 border rule. If you want borders on individual cells, target table.classname td and put the border rule there.
• To reset the width, use width: auto or put an explicit width.

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

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.

这可能很难实现，因为 Joomla 模板通常具有模块和组件覆盖，这意味着在很多地方会有很多表.祝你好运！:p

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

您是对的，在通用表格元素上设置这些样式(好吧，至少 width)对于模板来说是个坏主意.尽管他们可能使用表格进行布局这一事实无论如何都不是一个好兆头.

You're correct, setting those styles (well, width at 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.

这篇关于覆盖现有 CSS 表格规则的最佳方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！