Stopping table from inheriting css properties

HTML & CSS
1

hi there everyone,

I’ve placed a table in the center of a wordpress page and it’s inheriting traits that I’d rather it wouldn’t, namely it’s got a border and mouse-over effect. I’m trying to get it to actually be a transparent table with no border or mouse-over effect.

the page in question: http://www.bluemoonelise.net (center of the page)

I’m having problems figuring out how to assign these traits to the table I’m making. I would be very appreciative of any help you might be able to provide!

thanks,
json

2

Hi,

The easiest way would be to add a class to the table and then over-ride the existing styles from there.

In the context you have you could use #post-8 as a hook but I guess that might change.


#post-8 table,#post-8 td{
border:none;
background:transparent;
}
#post-8 tr:hover,#post-8 td:hover{background:transparent}
3

Thanks a bunch for the reply. I’m having a problem implementing the class, however.

If you look at the page, you can see that I’ve added the css under the class “transtable” then altered the table to include

class=‘transtable’

When I look at the page, the borders, backgrounds and hover-over traits still exist however. I even tried adding class=‘transtable’ to every element, table, tbody, tr and td, but the problem persists.

Any thoughts on why it’s not working? Did I implement it incorrectly?

Thanks a bunch for your time!

4

Paul’s CSS would have worked if you’d just put that in. But adding a class to the table is not powerful enough on its own to override some of the other styles. But you could do it with an id instead.

Remove all those “transtable” classes (a terrible idea, anyway!) and just have one id on your table:

<table [COLOR="#FF0000"]id="transtable"[/COLOR] width="100%" border="0" cellspacing="0" cellpadding="0">

</table>

Then paste this code into you CSS file:

#transtable, #transtable td{
  border:none;
  background:transparent;
}

#transtable tr:hover, #transtable td:hover {
  background:transparent;
}
5

Hi there and thanks very much for your help. It’s working fine now. I was wondering if I could ask you a couple questions however to help me understand the issue a little bit better:

  1. Why would the original code have worked without any changes to the html? What about “post-8” that makes it work this way?

  2. Why could class or style not change the table, but id would? Is it a hierarchy of power, meaning class will set traits but not override any while ID will override everything?

Thank you both very much for all your help.

6

The HTML had everything in place that was needed, including hooks for styling. #post-8 is an id that—like any id or class—can be referenced for styling the element to which it applies or any child elements of that element. #post-8 was a handy hook for getting the job done, that’s all. Paul’s concern was that this id might change at some time, as it looks like an id inserted by a CMS that may not be there later on … but we are only guessing there.

Why could class or style not change the table, but id would?

There’s an important aspect of CSS called “specificity”. If there are two or more conflicting style rules on an element, there is a pecking order that determines which wins out. IDs carry more weight than classes, but there’s more to it than that. I didn’t check, but whatever other rules were applying to that table were too powerful to be overridden by a simple class on the table, but an ID had the extra weight to override them.

In general, it’s better to use existing hooks (e.g. #post-8) than to include new hooks every time you want to add new styling. It makes for more efficient and lean code. For example, if you have a <ul> menu in a <div class=“head”>, rather than give the <ul> a special class, just reference it with

.head ul { … }

Hope that all makes some kind of sense. :slight_smile:

7

Thanks very much for taking the time to explain it to me. It’s very much appreciated!