css question

[paruhd0x]

Say I have

td.category {

border: 1px solid #666666;
}

td.item {

border: 1px solid #666666;
}

If I make a table like this...

<table>
<tr>
<td class='category'>Blah 123</td>
</tr>
<tr>
<td class='item'>Blah 321</td>
</tr>
</table>

The bottom border of category and the top border of item TD's do not overlap... they create a double width border. (I am testing this using FireFox)

Is there any way around this? I have tried messing around with taking 1 border side off with css and such but I run into problems no matter what because there is always a side with 1 border off in the table.

Cliffs: I am getting double thick borders where TD's ajoin. Question is how do I make them all the same width even if borders are ajoined.

 

[Barnaby W. Füi]

Just take off one of the borders.

td.category {
border: 1px solid #666666;
border-bottom: none;
}

td.item {
border: 1px solid #666666;
}

better yet:

td.category, td.item {
border: 1px solid #666666;
}

td.category {
border-bottom: none;
}

 

[paruhd0x]

but then when I add items to that where there is category, item, item, item.... item's borders will do the same thing.

 

[Barnaby W. Füi]

So then remove the top of the items' borders instead. Same idea: where two borders undesirably meet up, remove one.

 

[paruhd0x]

Thanks. For some reason I was thinking I had to take a border off on each of them.

 

[kamper]

tried:
table {
border-style: collapse;
}

? Ignore this if the above solution works, I'm not sure how well collapse addresses your problem. But there are other ways to manipulate borders