steve40 — Sun, 18 Jun 2006 15:49:48 +0000

It just gives you a single border around your page, or individual table. I wanted a border around my page, but only one single column dividing my navigation.

This code is what I used, and added a gif background with a bar to repeat vertically in the left td.

This might not be exactly what you are wanting to do, but it gives you another line of thought. Might come in handy sometime.

Triexa.com — Sun, 18 Jun 2006 15:32:52 +0000

steve40 wrote: Easier way.

I haven't tried that, but how does that allow me to have side borders on every row except the ones i don't want?

steve40 — Sun, 18 Jun 2006 14:32:12 +0000

Easier way.

Triexa.com — Sat, 17 Jun 2006 18:28:57 +0000

I ended up changing classes and applying it to more table elements, so I got what I wanted.

Thanks

Triexa.com — Sat, 17 Jun 2006 16:08:16 +0000

Well, I mean it is basically this:
http://www.phpbb.com/phpBB/

without me classing every single td/tr...

I guess in this one case though, I could...

Abhishek Reddy — Sat, 17 Jun 2006 15:21:07 +0000

Can you link to an example of where you'd like to use a spacer row with this border arrangement?

I suspect you might be able to get away with basic CSS selectors since forum themes tend to class elements like these anyway. Even if not, you should be able to easily add class names in the template from which the page is generated.

Triexa.com — Sat, 17 Jun 2006 14:57:25 +0000

I originally wanted to use multiple tables...
the thing is, it is for a forum, where I have:

"Indicator icon" | Forum name | topics | posts | last post

and if I put each in a different table, the columns won't line up. It's fluid, so it spans the entire width...

Abhishek Reddy — Sat, 17 Jun 2006 11:35:53 +0000

Right, I think I get what you mean. The following code produces what you see in the attached image, in Firefox 1.5, Opera 8.5 and Konqueror 3.5. It uses CSS 2.1 pseudo-classes and sibling selectors, so is a bit hairy. I doubt it'll show in IE, but it's worth a shot.

It doesn't seem right to me though -- this spacer row idea. I think you probably should just use multiple tables.

If you do use the code below, beware that adding more columns or tweaking the structure of the table could throw the selectors off, and you'll have to return to the drawing board.

If you dynamically generate the table server-side, then it might be an idea to insert class attribs for the appropriate cells and style by them, instead of this complicated CSS.

<style type="text/css">
    table {
    border-width: 1px 0 1px 0;
    border-style: solid;
    border-color: #000000;
    }

    table th { background-color:#CCCCCC; }

    table td {
    padding:5px;
    background-color:#EEEEEE;
    }

    table tr td:first-child, th:first-child {
    border-width: 0 0 0 1px;
    border-style: solid;
    border-color: black;
    }

    table tr td + td, th + th {
    border-width: 0 1px 0 0;
    border-style: solid;
    border-color: black;
    }

    table tr td.spacer-cell {
    background-color: white;
    border-width: 1px 0 1px 0;
    border-style: solid;
    border-color: black;
    }

</style>
<table cellpadding="0" cellspacing="0">
    <tr>
        <th>Header text</th>
        <th>header text</th>
    </tr>
    <tr>
        <td>Text</td>
        <td>More text</td>
    </tr>
    <tr>
        <td colspan="2" class="spacer-cell">SPACER</td>
    </tr>
    <tr>
        <th>Header text</th>
        <th>header text</th>
    </tr>
    <tr>
        <td>Text</td>
        <td>More text</td>
    </tr>
</table>

Busy — Sat, 17 Jun 2006 10:52:38 +0000

What about wrap the table in a div, borders top and bottom on that and none on the table, or do the whole thing in a div or two

Triexa.com — Sat, 17 Jun 2006 02:53:13 +0000

brady.k wrote: Oh, well create a class and then set no border:

HTML:
<tr class="spacer">...</tr>'

CSS:

tr.spacer { border-left-width: 0px; border-righ-width: 0px; ... }
'

That won't do anything. The border is on the entire table, not a row? I would much rather somehow exclude/mask it from that row only, instead of applying a class to every OTHER row...