What is the best way to override an existing CSS table rule?

问题

We're using a template for joomla where creators defined the rule in 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.

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.

回答1:

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.

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.

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

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.

回答2:

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

The following should override the above css rule:

.classofyourtable { width:50%; }

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

Please note also of the following CSS cascading precedence(1 being the highest):

inline
ids
class
tagname

Rules with less precedence will be overriden by the higher ones.

回答3:

Applying the style to a class or id both override the style in the general tag style.

回答4:

There's a number of ways to do it. As Marius says, a class or ID will help.

Lets say you put an id on the body element (<body id="foo">), then you could override the built-in table style using

#foo table {
    width: auto;
}

Or if you only want to restyle certain tables, try using a class (<table class="foo">):

table.foo {
    width: 25em;
}

But yeah, why not just edit the template's CSS to do what you want?

回答5:

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.

来源：https://stackoverflow.com/questions/1519271/what-is-the-best-way-to-override-an-existing-css-table-rule

标签

css

templates

Joomla