ansaurus

Question

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

Answer 1

+1 A:

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

Marius 2009-10-05 10:28:59

Answer 2

A:

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.

roosteronacid 2009-10-05 10:36:29

Answer 3

+1 A:

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?

Olly Hodgson 2009-10-05 10:37:51

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.

Maksee 2009-10-05 11:45:03

Answer 4

A:

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.

jerjer 2009-10-05 10:38:54

Answer 5

+1 A:

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.

DisgruntledGoat 2009-10-12 18:27:37

ansaurus

tags:

views:

answers:

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

Method 1

Method 2

related questions