html - 是否可以将两个表格边框“合并”到另一个？

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

您可以使用相邻的兄弟选择器覆盖样式：

table + table {
    border-top: 0;
}

或一般的兄弟选择器

table ~ table {
    border-top: 0;
}

小提琴 #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;
}

小提琴 #2

Answer 4

试试这个：

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