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

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

4 个答案:

更新