Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 449
SaturnsEye Avatar asked Dec 06 '22 05:12

SaturnsEye


2 Answers

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;
}
like image 80
thirtydot Avatar answered Dec 28 '22 18:12

thirtydot


Give style to lower table as :

margin-top:-1px;
padding-top:-1px;
like image 42
Rahul Avatar answered Dec 28 '22 18:12

Rahul