问题描述
||
我已经尝试了在CSS中可以想到的所有方法,以便获得可覆盖整个表行的背景色(标签),但是在每个单元格周围始终保持白色边框。
CSS(节选):
/*alternating row*/
table,tr,td,th {margin:0;border:0;padding:0;}
tr.rowhighlight {background-color:#f0f8ff;margin:0;border:0;padding:0;}
HTML(节选):
<tr class=\"rowhighlight\"><td>A</td><td>B</td><td>C</td></tr>
它只是不想合作。感谢您的帮助...
解决方法
table{border-collapse:collapse;}
,删除边框应使背景色油漆在单元之间没有任何间隙。如果仔细看一下jsFiddle,您应该会看到浅蓝色在行中延伸,没有白色间隙。
如果其他所有方法均失败,请尝试以下操作:
table { border-collapse: collapse; }
,尝试这个:
.rowhighlight > td { background: green;}
,我更喜欢使用border-spacing
,因为它可以提供更大的灵活性。例如,您可以
table {
border-spacing: 0 2px;
}
这只会折叠垂直边框,而保持水平边框不变,这听起来是OP真正在寻找的东西。
请注意,“ 7”与“ 8”不同。如要在tr
中添加自己的边框,则需要使用后者,如此处所示。
,tr.rowhighlight td,tr.rowhighlight th{
background-color:#f0f8ff;
}
,Firefox和Chrome不同
Chrome忽略了TR的背景色
示例:http://jsfiddle.net/T4NK3R/9SE4p/
<tr style=\"background-color:#F00\">
<td style=\"background-color:#FFF; border-radius:20px\">
</tr>
在FF中,TD会出现红角,而在Chrome中不会
,您是否尝试过将间距设置为零?
/*alternating row*/
table,tr,td,th {margin:0;border:0;padding:0;spacing:0;}
tr.rowhighlight {background-color:#f0f8ff;margin:0;border:0;padding:0;spacing:0;}
,即使在div中,这也对我有用:
div.cntrblk tr:hover td {
line-height: 150%;
background-color: rgb(255,0);
font-weight: bold;
font-size: 150%;
border: 0;
}
它选择了整个行,但我希望它不做标题,还没有研究过。它还部分修复了无法随着悬停放大的字体???显然,您要对单元而不是行应用设置,但是要使用tr:hover选择所有组成单元。继续跟踪不一致的字体缩放问题。不错,CSS会做到这一点。