Just draw internal borders of table

miraclemaker · Jul 3, 2003

Can anyone tell me how to define a CSS class that will just draw the internal borders of a table ?

say I have a black page with a red table on it. I just want the borders between the cells of the table to be drawn, and not the border around the outside of the table (if that makes sense)

Also, I want that table to be able to contain more tables, without having the same stle applied to the internal tables.

Thanks for any help anyone can give me.

grtfercho · Jul 3, 2003

why don't you just give individual cells the border?
<body >
<style>
.boxedcell
{
border:1px solid red;
}
</style>

<table align="center" width="50%" cellspacing="5" cellpadding="5" >
<tr class="boxedcell">
<td bgcolor="#DDDDFF">cells
</td>
<td> with</td>
<td> out</td>
<td> border</td>
</tr>
<tr>
<td bgcolor = "#FFFFFF" class="boxedcell">
<p>
cells
 </p>
</td>
<td class="boxedcell"><p>with </p></td>
<td class="boxedcell"><p>borders </p></td>
<td class="boxedcell"><p> </p></td>

</tr>
</table>

</body>

grtfercho çB^]\..
"Imagination is more important than Knowledge" A. Einstein

miraclemaker · Jul 3, 2003

Because that still gives a border around the outside of the table (the border of the cells on the edges of the table give the table itself a border)

grtfercho · Jul 3, 2003

then create a different class for the cells that hit the edges of the table

<body >
<style>
.boxedcell
{
border:1px solid red;
}
.boxedcellright
{
border-bottom : thin solid Black;
border-left : thin solid Black;
border-right : thin none Black;
border-top : thin solid Black;
}
.boxedcellleft
{
border-bottom : thin solid Black;
border-left : thin none Black;
border-right : thin solid Black;
border-top : thin solid Black;
}
.boxedcelltop
{
border-bottom : thin solid Black;
border-left : thin solid Black;
border-right : thin solid Black;
border-top : thin none Black;
}
.boxedcellbottom
{
border-bottom : thin none Black;
border-left : thin solid Black;
border-right : thin solid Black;
border-top : thin solid Black;
}

.boxedtopright
{
border-bottom : thin solid Black;
border-left : thin solid Black;
border-right : thin none Black;
border-top : thin none Black;
}
.boxedtopleft
{
border-bottom : thin solid Black;
border-left : thin none Black;
border-right : thin solid Black;
border-top : thin none Black;
}
.boxedbottomleft
{
border-bottom : thin none Black;
border-left : thin none Black;
border-right : thin solid Black;
border-top : thin solid Black;
}
.boxedbottomright
{
border-bottom : thin none Black;
border-left : thin solid Black;
border-right : thin none Black;
border-top : thin solid Black;
}
</style>

<table align="center" width="50%" cellspacing="5" cellpadding="5" >
<tr >
<td class="boxedtopleft">topleft</td>
<td class="boxedcelltop"> top</td>
<td class="boxedcelltop"> top</td>
<td class="boxedtopright"> topright</td>
</tr>
<tr>
<td class="boxedcellleft"> <p> left</p></td>
<td class="boxedcell"><p>center</p></td>
<td class="boxedcell"><p>center</p></td>
<td class="boxedcellright"><p>right </p></td>
</tr>
<tr>
<td class="boxedcellleft"> <p> left</p></td>
<td class="boxedcell"><p>center</p></td>
<td class="boxedcell"><p>center</p></td>
<td class="boxedcellright"><p>right </p></td>
</tr>
<tr>
<td class="boxedbottomleft">bottomleft</td>
<td class="boxedcellbottom">bottom</td>
<td class="boxedcellbottom">bottom</td>
<td class="boxedbottomright">bottomright</td>
</tr>
</table>

</body>

grtfercho çB^]\..
"Imagination is more important than Knowledge" A. Einstein

miraclemaker · Jul 3, 2003

Jeez! That's a fair old amount of code!
Thanks for the sample, but I think it's a bit much. I came up with this code:

TABLE.red_table TR TD
{
padding: 4px 4px 4px 4px;
border: 2px solid red;
}
TABLE.red_table
{
border-collapse: collapse;
border-style:hidden;
}

which works perfectly in Opera. But ie still displays the border around the outside of the table (it seems it ignores the style:hidden). So it's no good.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Just draw internal borders of table

miraclemaker

Programmer

grtfercho

Programmer

miraclemaker

Programmer

grtfercho

Programmer

miraclemaker

Programmer

Similar threads

Part and Inventory Search

Sponsor