working with tables

[NickMalloy]

I have a page that looks like the following code. Is there a way to tell the page to put the border around the outside table, but not the inside table?

<div id="righttop">
<table>
stuff here
<table>
stuff here
</table>
stuff here
</table>
</div>


Here are my styles

#righttop {
float: left;
margin-left: 15px;
}

#righttop table {
border: 1px solid #D1D687;
}

 

[Vragabond]

You would use a child selector for that:

#righttop>table {
  border: 1px solid #D1D687;
}

However, since there's a pretty popular browser out there which doesn't want to support child selectors, your endeavours will be limited. Therefore, at this time, your best bet is to use class or id.

#righttop table.first {
  border: 1px solid #D1D687;
}

...

<div id="righttop">
<table class="first">
stuff here
<table>
stuff here

 

[ChrisHunt]

Or you can do it like this, without additional classes or things IE doesn't understand:

#righttop table {
  border: 1px solid #D1D687;
}

#righttop table table {
  border: none;
}

You may find that one or two technically unnecessary classes make it easier to keep track of what's what though.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd