Topic: table borders for each cell in css (Page 1 of 1)

Is there any way to specify that each cell have a border in the table tag of a CSS file? For instance, if i specify that a table have a 1px border in the css file, it only shows around the outer edges of the table. If I do a border=1 in the actual html table tag, it puts a border around each cell in the table. How can I do this in CSS?

You need to specify that the actual cells have a border, like this...

TD {
border: 1px solid black;
}


..
~Existence is a mere pattern.~

I tried doing that, but when you put a bunch of cells up against each other, it makes a 2px border instead of a 1px border.

Add this to your CSS-- border-collapse: collapse;

I've found it works equally well on both table and td. I tend to put it on table just from force of habit. Doesn't work in Netscape 6 and other early Gecko browsers.

If you only want a 1px border throughout the table you could do something like this....

TABLE {
border-left: 1px solid black;
border-top: 1px solid black;
}
TD {
border-right: 1px solid black;
border-bottom: 1px solid black;
}


..
~Existence is a mere pattern.~

[This message has been edited by Rooster (edited 12-03-2002).]

Rooster: Have you actually looked at that CSS on a table? It gives a horrible illusion of what I think acidbox is looking for. The corners don't line up and the gaps between the cells show plain as day. Besides, even if it worked, it's an ugly, bloated kludge of a solution.

Trust me on this,

TABLE {
border: 1px solid #000;
border-collapse: collapse;
}
http://www.w3.org/TR/CSS2/tables.html#propdef-border-collapse

Simple, neat, effective and no embarassing gaps or overruns. Ask for it at your pharmacy by name.

Brucew: While Rooster's solution requires a few more CSS properties or HTML attribute to close up the gaps you mentioned, I have seen it work and used it myself in the past. Nonetheless, you are right that border-collapse is the correct way to handle this.

Hey, I'm just saying you ~could~ do that. Do whatever you think is best for the situation. I'm really not going to twist anyone's arm; I'm simply throwing out options. An option that could be made to work with earlier browser versions, as opposed to the "collapse" style which as you said is only implemented in later versions.

And yes, if your not trying to write code for earlier browser versions (< IE 5.0), "collapse" ~is~ the proper style to use.


..
~Existence is a mere pattern.~