Hide border of table
I have a 1px border around my styled tables.
I have something to the effect of:
<style type="text/css">
table { border:1px solid #000000; }
table th { background-color:#CCCCCC; }
table td { padding:5px; background-color:#EEEEEE; }
</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" style="background-color:#FFFFFF">SPACER</td>
</tr><tr>
<th>Header text</th>
<th>header text</th>
</tr><tr>
<td>Text</td>
<td>More text</td>
</tr>
</table>Is there anyway I can hide the table border for the row of that SPACER? I don't want the lines to run down the sides...
SonicMailer Pro - Professional mailing list manager & award-winning email marketing software
Download a FREE 30-day trial today!
Use coupon savemoreon4 and save 10%!
kb posted this at 02:12 — 17th June 2006.
He has: 1,380 posts
Joined: Feb 2002
Example:
border-left-width: 0px;'Triexa.com posted this at 02:17 — 17th June 2006.
They have: 173 posts
Joined: Feb 2005
oh, but i DO want borders down the side, just not for that SPACER row.
kb posted this at 02:21 — 17th June 2006.
He has: 1,380 posts
Joined: Feb 2002
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;
...
}
Triexa.com posted this at 02:53 — 17th June 2006.
They have: 173 posts
Joined: Feb 2005
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...
SonicMailer Pro - Professional mailing list manager & award-winning email marketing software
Download a FREE 30-day trial today!
Use coupon savemoreon4 and save 10%!
Busy posted this at 10:52 — 17th June 2006.
He has: 6,151 posts
Joined: May 2001
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
Abhishek Reddy posted this at 11:35 — 17th June 2006.
He has: 3,348 posts
Joined: Jul 2001
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>
Triexa.com posted this at 14:57 — 17th June 2006.
They have: 173 posts
Joined: Feb 2005
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...
SonicMailer Pro - Professional mailing list manager & award-winning email marketing software
Download a FREE 30-day trial today!
Use coupon savemoreon4 and save 10%!
Abhishek Reddy posted this at 15:21 — 17th June 2006.
He has: 3,348 posts
Joined: Jul 2001
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 posted this at 16:08 — 17th June 2006.
They have: 173 posts
Joined: Feb 2005
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...
SonicMailer Pro - Professional mailing list manager & award-winning email marketing software
Download a FREE 30-day trial today!
Use coupon savemoreon4 and save 10%!
Triexa.com posted this at 18:28 — 17th June 2006.
They have: 173 posts
Joined: Feb 2005
I ended up changing classes and applying it to more table elements, so I got what I wanted.
Thanks
steve40 posted this at 14:32 — 18th June 2006.
He has: 490 posts
Joined: May 2005
Easier way.
Triexa.com posted this at 15:32 — 18th June 2006.
They have: 173 posts
Joined: Feb 2005
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 posted this at 15:49 — 18th June 2006.
He has: 490 posts
Joined: May 2005
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.
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.