是否可以将两个表格边框“合并”在一起？

Question

我已经为我的两个表格提供了相同的样式来创建1px边框，但问题是当两个表格相互接触时，顶部表格的底部边框和底部表格的顶部边框相遇并创建看起来像2px边框。

正如你在这里看到的：jsfiddle

这是我用来设置表格样式的CSS：

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

我试过border-collapse:collapse;，但它似乎没有做到这一点。

Answer 1

这里的想法是在紧跟另一个表之后的每个表上删除所有相关的顶部边框。

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;
}

Answer 2

将样式赋予下表：

margin-top:-1px;
padding-top:-1px;

Answer 3

您可以使用adjacent sibling selectors覆盖样式：

table + table {
    border-top: 0;
}

或者general sibling selectors

table ~ table {
    border-top: 0;
}

Fiddle #1

---

更新

在这种情况下，最好首先折叠边框：

table { border-collapse: collapse; }

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

table + table,
table + table tr:first-child > * {
    border-top: 0;
}

Fiddle #2

Answer 4

试试这个：

table {
    border-spacing:0;
    border-collapse:collapse;
}