Table Border Question

[rjseals]

I have a site where I have several cells along the left side of the page (vertically) I want a single horizontal line down the right side of these cells. For each of the cells I use this:

...border-right:1px solid #000000...


This will work to put a line on the cell, however there are breaks between each cell. I would like to have one continuous line without the breaks.

How can I do this?

 

[rpgfan3233]

Try using the 'border-collapse' property:

table { border-collapse: collapse; }

 

[rjseals]

thanks,
as you can tell I am a css newbie.

Appreciate your response.

 

[theEclipse]

rpg-

is this analagous to using [tt]cellpadding="0" cellspacing="0"[/tt]?

Robert Carpenter
"You and I have need of the strongest spell that can be found to wake us from the evil enchantment of worldliness." - C.S. Lewis (The Weight of Glory)

http://www.robertcarpenter.net

 

[rpgfan3233]

Almost, theEclipse. Table cells automatically have padding, so you have to remove that to get the right effect.

border-collapse = cellspacing
padding = cellpadding

 

[Vragabond]

Not entirely correct. The css equivalent for [tt]cellspacing[/tt] is [tt]border-spacing[/tt]. Alas, IE does not support that property (shocker!) so it cannot be properly used in development. However, border-collapse will lead to the same visual result if the meaning is a little different. There are two values to border-collapse: separate (which means that every cell will have borders of its own) and collapse (which means that adjacent cells will share a common border. Since it is impossible to share a common border and have some spacing between the borders (cellspacing), border-collapse will yeild same results one would get from border-spacing.