html中td边框显示,html – 如何在tr的背景颜色上显示td的边框

使用Firefox 24中的html表来显示信息,我广泛使用CSS来格式化行和列.

我遇到的问题是我为< td>指定了一些边框,为< tr>指定了背景颜色,但tr的背景颜色与td的边框重叠.

它是正常的,而t样式的顶部显示了tr样式吗？

这两个问题是：

>所有带有class =“ref”的td应该正确显示左右两个2px

.ann和.tbx行中的边框(设置tr背景颜色时不是这种情况)

>即使在相邻单元格中设置了背景颜色,也应始终显示第一列右边框,参见

div.tb tr td:first-child {

border-right: 1px solid black;

}

CSS：

/* Default reset style sheet */

* {

margin: 0;

padding: 0;

position: relative;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

.tb {

font-family: Ubuntu;

font-size: small;

text-align: right;

}

div.tb tr td {

padding: 0 2px 0 2px;

}

div.tb tr td {

padding: 0 2px 0 2px;

}

div.tb tr td:not(:first-child) {

width: 92px;

}

div.tb tr td:first-child {

border-right: 1px solid black;

}

div.tb tr:not(:first-child) td:not(:first-child):not(.ref) {

border-right: 1px solid #b0b0b0;

}

div.tb tr td.ref { /* FIXME */

border-left: 2px solid black;

border-right: 2px solid black;

}

div.tb tr.ann {

background: #99CCFF;

font-size: 1.3em;

font-weight: bold;

text-align: center;

border-bottom: 1px solid black;

}

div.tb tr.ann td {

height: 2.5em;

}

div.tb tr.ann td:first-child {

background: white;

font-size: small;

font-weight: bold;

text-align: right;

}

div.tb tr.ann td.ref {

background: green;

color: white;

}

div.tb tr.txb {

background: #99CCFF;

font-weight: bold;

}

HTML：

Barfoo	Bar	Blah	Foobar	FooBlah	BlahBar	Foo
ann	13	9	13	12	9	15
nbr	-34	20	15	18	123	12
txb	2,83%	3,38%	3,84%	3,21%	3,52%	3,27%

如果可能的话,我想保持设置border-collapse：collapse(而不是单独),如下所示：

table {

border-collapse: collapse;

border-spacing: 0;

}

我不喜欢Table Border Overlap解决方案,因为div增加了额外的边框宽度并使代码不易清晰.