Ale*_*lex 6 html css firefox html-table
使用Firefox 24中的html表来显示信息,我广泛使用CSS来格式化行和列.
我遇到的问题是,我指定的一些边框<td>,以及background-color为<tr>,但TR的背景颜色重叠TD的边界.它是正常的,而t样式的顶部显示了tr样式吗？
这两个问题是:
class="ref"应该正确显示一个2px左右边框.ann和.tbx行(设置tr背景颜色时不是这种情况)即使在相邻单元格中设置了背景颜色,也应始终显示第一列右边框,参见
div.tb tr td:first-child {
border-right: 1px solid black;
}
这是一个代码示例(http://jsfiddle.net/RVJSD/):
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:
<body>
<div class="tb">
<table>
<thead/>
<tbody>
<tr class="ban"><td>Barfoo</td><td>Bar</td><td>Blah</td><td>Foobar</td><td>FooBlah</td><td>BlahBar</td><td>Foo</td></tr>
<tr class="ann"><td>ann</td><td>13</td><td>9</td><td class="ref">13</td><td>12</td><td>9</td><td>15</td></tr>
<tr class="nbr"><td>nbr</td><td>-34</td><td>20</td><td class="ref">15</td><td>18</td><td>123</td><td>12</td></tr>
<tr class="txb"><td>txb</td><td>2,83%</td><td>3,38%</td><td class"ref">3,84%</td><td>3,21%</td><td>3,52%</td><td>3,27%</td></tr>
</tbody>
</table>
</div>
</body>
如果可能的话,我想保留设置border-collapse:collapse(而不是separate):
table {
border-collapse: collapse;
border-spacing: 0;
}
而且我不喜欢Table Border Overlap解决方案,因为div增加了额外的边框宽度并使代码不易清晰.
Bor*_*sky 10
您的样式风格与一切position: relative.这会导致每个单元格成为其自己的堆叠上下文,并且如果它们重叠(在折叠的边框模型中,它们),则将其背景及其行和表的背景绘制在早期单元格的边框上.而且由于你将所有边界放在单元格的右侧(如同,取决于显示的早期单元格的边界),事情就会失败.
请注意,根据规范,此处的行为未定义; CSS(至少在2.1版本中)没有定义相对定位表格单元格时会发生什么.