使用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增加了额外的边框宽度并使代码不易清晰.