css_如何修改tr的属性
(2012-08-13 15:08:04)
标签:
it |
分类: 前端/JS/CSS/JQuery |
tr是html标签中行的标记,在web开发的时候很多时候为了美观我们需要修改行的属性,比如当鼠标移到某行的时候,这一行的背景发生改变等。
如果你用下面的语句修改就大错特错了,
tr:hover{
border:1px #000000 solid;
}
这样是没有效果的。
因为表格中的tr并非单一的边框,这样便需要属性border-collapse,border-collapse 属性设置表格的边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示。
实例:为表格设置合并边框模型:
table
可能的值是:
separate 默认值。边框会被分开。不会忽略border-spacing 和 empty-cells 属性。
collapse
inherit
所以上面问题的解决方法应该是:
<style type="text/css">
.tablecss2{ border:#C0C0C0 1px solid; border-collapse:collapse; margin:5px; }
.tablecss2 tr:hover{ BORDER-BOTTOM: #C0C0C0 1px solid;
BORDER-right: #C0C0C0 1px solid;
padding:2px;
background-color:#E8E8E8}
</style>
<table width="600" cellspacing="0" cellpadding="0" align="center" class="tablecss2">
</table>