SaturnsEye SaturnsEye - 3 months ago 8
CSS Question

is it possible to "merge" two table borders into one another?

I have given both of my tables the same styling to create a 1px border, but the problem is that when the two tables are touching each other the bottom border from the top table and the top border from the bottom table meet and create what looks like a 2px border.

As you can see here: jsfiddle

this is the css i'm using to style my tables:

table,td, th {
border-style:solid;
border-width:1px;
border-color:#000;
}


I've tried
border-collapse:collapse;
but it doesn't seem to do the trick

Answer

The idea here is to remove all relevant top borders on every table immediately following another table.

http://jsfiddle.net/thirtydot/yrUXb/10/

table, td, th {
    border-collapse: collapse;
    border: 1px solid #000;
}
table + table, table + table tr:first-child th, table + table tr:first-child td {
    border-top: 0;
}