如何在 tr 背景颜色上显示 tds 边框
Posted
技术标签:
【中文标题】如何在 tr 背景颜色上显示 tds 边框【英文标题】：How to show td's border over tr's background color 【发布时间】：2013-10-07 16:09:59 【问题描述】：在 Firefox 24 中使用 html 表格来显示信息，我广泛使用 CSS 来格式化行和列。
我遇到的问题是我为<td>指定了一些边框，为<tr>指定了一个background-color，但是tr的背景颜色与td的边框重叠。
tr 样式显示在 td 样式之上是否正常？
两个问题是：
-
所有带有
class="ref" 的td 应该正确显示一个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 增加了额外的边框宽度，使代码不那么清晰。
【问题讨论】：
【参考方案1】：您的样式表使用position: relative 设置所有样式。这会导致每个单元格成为自己的堆叠上下文，并且如果它们重叠（在折叠边框模型中它们会这样做），则将其背景以及其行和表格的背景绘制在早期单元格的边框上。而且，由于您将所有边框都放在单元格的 右侧 上（例如，取决于之前显示的单元格的边框），所以事情失败了。
请注意，根据规范，此处的行为不是未定义的； CSS（至少从 2.1 版开始）没有定义相对定位表格单元格时会发生什么。
【讨论】：
确实，注释掉默认重置样式表中的position: relative; 语句可以正确显示边框。另一方面，我猜如果大多数重置样式表默认对所有元素使用position: relative;，我不应该保持这种方式吗？如果是这样，我尝试在 .td tr 和 td 上使用 position: static;，而不重现更正的行为。有吗？
为什么重置样式表会使用position: relative？ static 会更有意义...如果我在您的情况下使用 position:static 设置 tr/td 样式，则边框看起来很好。
在jsfiddle.net/M25R7 上，我添加了你提到的position:static 到div.tb tr 和div.tb tr td，为* 元素保留position: relative。不幸的是，边界显示不佳。到目前为止，使其工作的唯一方法就是将position: relative 注释掉为*。这是唯一的解决方案吗？
您可能还需要静态定位 tbody。
使用div.tb tbody, div.tb tr, div.tb tr td position: static; 确实可以解决问题，而不必为*注释掉position: relative。谢谢！【参考方案2】：
这是您寻找悬停使用: 而不是.
div.tb tr.ann td:hover /* FIXME */
background: #069D81;
border-left: 2px dotted #069D81;
border-right: 2px dotted #069D81;
Js FIDDLE
【讨论】：
这与问题无关。没有任何“悬停”以上是关于如何在 tr 背景颜色上显示 tds 边框的主要内容，如果未能解决你的问题，请参考以下文章
DIV+CSS中复选框的背景颜色不显示，但是边框显示，为啥？