Table border inheritance

Forum Moderators: not2easy

Message Too Old, No Replies

Table border inheritance

MikeH5

1:50 pm on Mar 23, 2005 (gmt 0)

I've got a table border color that I'm trying to overwrite, and having a bit of trouble... (BTW, The parent class is generated by a software package that were using, so I have no control up until the DIV tag)

<STYLE>
.outer {border: solid 2px blue; }
table.outer .inner {border: solid 10px red!important;}
</STYLE>

Is there any way to overwrite this outer table tag from within?

BlobFisk

1:57 pm on Mar 23, 2005 (gmt 0)

Welcome to WebmasterWorld, MikeH5!

If all you are trying to do is remove/change the border from the table why not write the style rule into the page?

Where you are putting your <div> is not corrent. You would need to put it inside a TD, even so it would not make any difference to the table border.

Call another CSS file after the initial one is called, or if you have no control over the <HEAD> of your document, write the rule directly inline:

<table class="outer" >
<tr>
<td colspan="1" >
<style type="text/css">
table.outer {
border: none;
}
</style>
bla bla bla</td>
</tr>
</table>

This is not the most elegant way of doing this, but if you have absolutely no control over the CSS files or access to anything other than inside the table, it may be your only solution.

HTH

MikeH5

2:36 pm on Mar 23, 2005 (gmt 0)

That certainly works, but it makes a global change for all "outer" elements... I need to find a way to overwrite "outer" only when it has a child "inner".

(Just for some additional background, this is for changing the border colors of individual portlets. The portal software only has one type of "outer" tag, and this is automatically inserted. Any global change would affect all porlets rather than just the ones in question.)

BlobFisk

2:42 pm on Mar 23, 2005 (gmt 0)

There are adjacent selectors and child psudoclasses in CSS that would be ideal here, but the support for them varies from OK to not at all!

You could wrap the table in a <div class="wrapperDiv"> and then in the CSS:

div.wrapperDiv table.outer {
border: none;
}

That may be the easist way? Can you wrap this table in a Div?

The W3C CSS adjacent selectors [w3.org] documentation is an invaluable resource...

MikeH5

2:50 pm on Mar 23, 2005 (gmt 0)

Nope, the COTS software is generating the outer table tag, so I'm unable to insert anything higher up in code than where the "inner" class is. I'm not sure that there is a solution given our constraints, just hoping that someone has some clever ideas.

A solution would only need apply for IE.

BlobFisk

4:20 pm on Mar 23, 2005 (gmt 0)

A very dirty solution would be to add a <tbody id=""> under the <table> and then use a function that removes the border of the parent element:

So, in your HTML:

<table class="outer">
<tbody id="controlElement">
<tr>
...
</tr>
</TBODY>
</table>

And then the script:

<script type="text/javascript">
function doIt(theElement) {
document.getElementById(theElement).parentNode.style.border = 'none';
}
doIt('controlElement');
</script>

Runningthe doIt function should happen in the <body> of the page (it can be in a cell of the table).

HTH