homepage Welcome to WebmasterWorld Guest from 54.167.179.48
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
How to get a table border separate from the cell border.
while using border-collapse?
MichaelBluejay

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4501794 posted 11:53 pm on Sep 29, 2012 (gmt 0)

I'm trying to get all my table cells to have a 1px silver border, and the table itself to have a 1px black border. I don't care whether the black border replaces the silver square around the table, or whether it sits outside that square. I just can't get either to work. Not without lots of code, anyway.

Here's the HTML:
<table> 
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>

This gets me the separate black border, but the cell borders are then doubled to 2px:
<style type=text/css> 
table {border:1px solid black; border-spacing:0px}
td {border:1px solid silver; padding:10px}
</style>

Adding "border-collapse:collapse" to the table makes the cell borders 1px as they should be, but then the black border disappears.

Curiously, the border-collapse version works if I change the cell border style to "dotted". In that case the black border magically appears. But then I'm stuck with a dotted border, and dotted borders are for losers. I can't get this to work with solid borders.

What's the simplest way to achieve a separate table border from solid cell borders, all of which are 1px?

 

rainborick

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4501794 posted 5:20 am on Sep 30, 2012 (gmt 0)

I'm not sure if this is what you're after, but it seems to me you could enclose the <table> in a <div> and assign a black border to the <div>, and silver borders to the <td>s.

lucy24

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4501794 posted 11:12 am on Sep 30, 2012 (gmt 0)

Curiously, the border-collapse version works if I change the cell border style to "dotted". In that case the black border magically appears.

Not curious at all; it's part of the border specification. See Border Conflict Resolution [w3.org].

Short version: when there are conflicting borders, might makes right and bigger is better-- except that "hidden" trumps everything.
narrow borders are discarded in favor of wider ones. If several have the same 'border-width' then styles are preferred in this order: 'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove', and the lowest: 'inset'

So if you could bring yourself to make the table border just one teeny little pixel fatter, your problem would be solved. Or try setting the overall border to "double". This obviously has no meaning when it's only 1px wide, but give it a try.

birdbrain

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4501794 posted 12:39 pm on Sep 30, 2012 (gmt 0)

Hi there MichaelBluejay,

try it like this...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>double border</title>

<style type="text/css">
table {
border:1px double #000;
border-collapse:collapse;
}
td {
padding:10px;
border:1px solid #c0c0c0;
}
</style>

</head>
<body>

<table><tr>
<td>1</td><td>2</td><td>3</td>
</tr><tr>
<td>4</td><td>5</td><td>6</td>
</tr> <tr>
<td>7</td><td>8</td><td>9</td>
</tr></table>

</body>
</html>


birdbrain

MichaelBluejay

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4501794 posted 8:03 pm on Sep 30, 2012 (gmt 0)

Yes, setting the table border style to "double" did the trick. Thanks!

birdbrain

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4501794 posted 8:18 pm on Sep 30, 2012 (gmt 0)

No problem, you're very welcome. ;)


birdbrain

MichaelBluejay

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4501794 posted 5:17 pm on Oct 3, 2012 (gmt 0)

Actually, lucy24 posted the solution first (and explained it). :)

birdbrain

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4501794 posted 5:41 pm on Oct 3, 2012 (gmt 0)

Hi there MichaelBluejay,

That is quite possible, as explanations are not my forte,
I read the poster's problem and then post appropriate code. :)

The meanderings in between are, unfortunately, often overlooked. ;)

birdbrain

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved