您的位置:首页 > 其它

Table交替行变色 鼠标经过变色 单击变色

2009-12-28 15:01 363 查看
  最近做项目用到Repeater,没有好的样式只能套一个Table来设置交替行颜色、鼠标经过颜色、单击颜色,网上艘了一下资料整理了一下,具体的效果如下,

  代码

/*-----------------Repeater 控件内部Table样式定义-----------------*/
/* Repeater内部Table的样式 */
.Rep_tab
{
width: 100%;
margin: 0px auto;
font: Georgia 11px;
font-size: 12px;
font-family: Tahoma, Arial, Helvetica, Sans-serif, "宋体";
color: #333333;
text-align: center;
vertical-align:middle;
border-collapse: collapse; /*细线表格代码*/

}
/* Repeater内部Table的td样式 */
.Rep_tab td
{
border:1px solid #4d9ab0; /*细线表格线条颜色*/
height: 25px;
}
/* Repeater内部Table的caption样式 */
.Rep_tab caption
{
text-align: center;
font-size: 12px;
font-weight: bold;
margin: 0 auto;
}
/* Repeater内部Table的TR的奇数行样式 */
.Rep_Tab_OddTr
{
background-color: #f8fbfc;
color: #000000;
height: 25px;

}
/* Repeater内部Table的TR的偶数行样式 */
.Rep_Tab_EvenTr
{
background-color: #e5f1f4;
color: #000000;
height: 25px;
}
.Rep_Tab_HeaderTr
{
background-color: #ffffee;
color: #000000;
}
/*鼠标经过的颜色*/
.Rep_Tr_Move
{
background-color: #ecfbd4;
color: #000000;
height: 25px;
}
/* 鼠标点击的颜色*/
.Rep_Tr_Click
{
background-color: #bce774;
color: #333333;
height: 25px;
}


  注意:

  在界面内添加JS和CSS的引用,记得是在你的Table的后面,添加如下代码:

  <script type="text/javascript" language="javascript">
  window.onload = SetTableColor("Tab");
  </script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: