加载中…
个人资料
  • 博客等级:
  • 博客积分:
  • 博客访问:
  • 关注人气:
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
正文 字体大小:

css_如何修改tr的属性

(2012-08-13 15:08:04)
标签:

it

分类: 前端/JS/CSS/JQuery

trhtml标签中行的标记,在web开发的时候很多时候为了美观我们需要修改行的属性,比如当鼠标移到某行的时候,这一行的背景发生改变等。

如果你用下面的语句修改就大错特错了,

tr:hover{

border:1px #000000 solid;

}

这样是没有效果的。

因为表格中的tr并非单一的边框,这样便需要属性border-collapseborder-collapse 属性设置表格的边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示。

实例:为表格设置合并边框模型:

table

  {

  border-collapse:collapse;

  }

可能的值是:

separate 默认值。边框会被分开。不会忽略border-spacing empty-cells 属性。

collapse   如果可能,边框会合并为一个单一的边框。会忽略 border-spacing empty-cells 属性。

inherit      规定应该从父元素继承border-collapse 属性的值。

所以上面问题的解决方法应该是:

<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">

  <tr>

    <td>212121</td>

    <td>231231321</td>

  </tr>

   <tr>

    <td>212121</td>

    <td>231231321</td>

  </tr>

</table>

0

阅读 收藏 喜欢 打印举报/Report
  

新浪BLOG意见反馈留言板 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

新浪公司 版权所有