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

css templates joomla

23,051

Solution 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.

Solution 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.

Solution 3

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?

Solution 4

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

View more solutions

23,051

Author by

Maksee

Updated on March 31, 2020

Comments

Maksee about 4 years
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.
Maksee over 14 years

The table has flexible width depending on the data shown (with php), so the value will be different every time. In this case style param is ok. But still is it possible to control the spacing between cells with css in IE6 and IE7? The problem is if I want to show a table with filled cells and transparent 1px space between them, I know how it can be done with plain html and it will look ok in all browsers. But moving to css makes the task harder.