Joomla module CSS override

Question

I have built a Joomla module which however is just an echo of a specific calculator. There is a table in the echo for formatting purposes. Using the whole script outside Joomla, everything looks ok. But I realized that Joomla forces its CSS upon my tables. My CSS should be valid and loaded. It's very simple:

<table class="joomla_tables"  cellpadding="5" cellspacing="0">
...

.joomla_tables{
border:0;
padding:5px;
}

I already checked it with Firebug. But however firebug also says that my table inherits its style

tr, td {
border: 1px solid #DDDDDD;
}

from a file called nature.css which comes with the *beez_20* template i think. Its quite annoying that only this little change destroys the whole looking of my table. And I'm not able to find a solution how to change the style of my table without changing the template's CSS. (Due to the fact that it would just have changes for me but not for these users who install this module too). So I'm wondering why doesn't Joomla use my CSS and instead of this, overrides it with its own?

Answer 1

Both the selectors are completely different, what you are doing with this joomla_tables is you target the table where joomla targets tr and td so you need

.joomla_tables tr, 
.joomla_tables td {
   border: 0;
   padding: 5px;
}

Now the above selector will select all tr and td which are nested inside element having a class joomla_tables.

Joomla targets tr and td, you are targeting table, so using your selector, it does get rid of the table border but you will still see it, as td has the border, so just use the selector I provided and it will target the elements perfectly.

For making it more stricter, you can use

table.joomla_tables tr, 
table.joomla_tables td {
   /* Styles goes here */
}

Note: tr don't have borders and paddings, it's the td which has borders (It can have borders if you've border-collapse: collapse;)