CSS Repeater - 交错显示行背景色 table行鼠标进入事件特效 禁止文本换行

 1. 禁止文本换行的CSS: white-space:nowrap;
    strict mode下在IE7和FF中都正常，以前IE用的word-break、word-wrap属性对FF无效。

    2. Repeater控件，交替显示table行的背景颜色，鼠标移动到某一行时用特殊背景显示。
    方法 purecss给出了很多种，看了一下现在新浪邮箱，使用的也是文章中选择的方法。
    repeater控件:

< asp:Repeater  ID ="Repeater1"  runat ="server" >
     < HeaderTemplate >
         < table  class ="list"  cellpadding ="0"  cellspacing ="0" >
             < tr  class ="listheader" >
                 < th > &nbsp; </ th >
                 < th > 查看 </ th >
                 < th > 编辑 </ th >
                 < th > 模板ID </ th >
                 < th > 用户编号 </ th >
                 < th > 描述 </ th >
                 < th > 状态 </ th >
                 < th > 控制类 </ th >
                 < th > 模板内容 </ th >   
             </ tr >  
     </ HeaderTemplate >
     < ItemTemplate >
         < tr  class ="listitem1"  onmouseover ="this.className='over'"  onmouseout ="this.className='listitem1'" >
             < td  class ="cmdtd" >
                 < asp:CheckBox  ID ="CheckBox1"  runat ="server"   />
                < asp:HiddenField  ID ="templateID"  runat ="server"  Value ='<%#  DataBinder.Eval(Container.DataItem, "ID")% > '/>
             </ td >  
             < td  class ="cmdtd" >
                < asp:ImageButton  ID ="cmdView"  runat ="server"  ImageUrl ="../../Skin/default/icon_view.gif"  CausesValidation ="False"
                   OnCommand ="cmdView_Click"  CommandArgument ='<%#  DataBinder.Eval(Container.DataItem, "ID")% > '>
                </ asp:ImageButton >
             </ td >  
             < td  class ="cmdtd" >
                < asp:ImageButton  ID ="cmdEdit"  runat ="server"  ImageUrl ="../../Skin/default/icon_edit.gif"  CausesValidation ="False"
                   OnCommand ="cmdEdit_Click"  CommandArgument ='<%#  DataBinder.Eval(Container.DataItem, "ID")% > '>
                </ asp:ImageButton >
             </ td >  
             < td > <% # DataBinder.Eval(Container.DataItem,  " ID " ) %> </ td >  
             < td > <% # RenderUtil.FormatString(DataBinder.Eval(Container.DataItem,  " ShortName " )) %> </ td >  
             < td > <% # RenderUtil.FormatString(DataBinder.Eval(Container.DataItem,  " LongDescription " )) %> </ td >  
             < td > <% # DataBinder.Eval(Container.DataItem,  " State " ) %> </ td >   
             < td > <% # RenderUtil.FormatString(DataBinder.Eval(Container.DataItem,  " AttributeProvider " )) %> </ td >  
             < td >
                 < textarea  id ="Textarea1"  rows ="3"  class ="textbox"  readonly ="readonly"  cols ="20"  style ="width:400px;" >
                    <% # DataBinder.Eval(Container.DataItem,  " Content.Content " ) %>
                </ textarea >
             </ td >  
         </ tr >
     </ ItemTemplate >
     < AlternatingItemTemplate >
         < tr  class ="listitem2"  onmouseover ="this.className='over'"  onmouseout ="this.className='listitem2'" >
             < td  class ="cmdtd" >
                 < asp:CheckBox  ID ="CheckBox1"  runat ="server"   />
                < asp:HiddenField  ID ="templateID"  runat ="server"  Value ='<%#  DataBinder.Eval(Container.DataItem, "ID")% > '/>
             </ td >  
             < td  class ="cmdtd" >
                < asp:ImageButton  ID ="cmdView"  runat ="server"  ImageUrl ="../../Skin/default/icon_view.gif"  CausesValidation ="False"
                   OnCommand ="cmdView_Click"  CommandArgument ='<%#  DataBinder.Eval(Container.DataItem, "ID")% > '>
                </ asp:ImageButton >
             </ td >  
             < td  class ="cmdtd" >
                < asp:ImageButton  ID ="cmdEdit"  runat ="server"  ImageUrl ="../../Skin/default/icon_edit.gif"  CausesValidation ="False"
                   OnCommand ="cmdEdit_Click"  CommandArgument ='<%#  DataBinder.Eval(Container.DataItem, "ID")% > '>
                </ asp:ImageButton >
             </ td >  
             < td > <% # DataBinder.Eval(Container.DataItem,  " ID " ) %> </ td >  
             < td > <% # RenderUtil.FormatString(DataBinder.Eval(Container.DataItem,  " ShortName " )) %> </ td >  
             < td > <% # RenderUtil.FormatString(DataBinder.Eval(Container.DataItem,  " LongDescription " )) %> </ td >  
             < td > <% # DataBinder.Eval(Container.DataItem,  " State " ) %> </ td >   
             < td > <% # RenderUtil.FormatString(DataBinder.Eval(Container.DataItem,  " AttributeProvider " )) %> </ td >  
             < td >
                < textarea  id ="Textarea1"  rows ="3"  class ="textbox"  readonly ="readonly"  cols ="20"  style ="width:400px;" >
                    <% # DataBinder.Eval(Container.DataItem,  " Content.Content " ) %>
                </ textarea >
             </ td >  
         </ tr >
     </ AlternatingItemTemplate >
     < FooterTemplate >
         </ table >
     </ FooterTemplate >
</ asp:Repeater >

    CSS:

.list
{
    border-right : solid 1px #888888 ;
    border-top : solid 1px #888888 ;
}
tr.listheader td,th
{
    border-left : solid 1px #BBBBBB ;
    border-bottom : solid 1px #BBBBBB ;
    background-color : #E6F6F6 ;
    color : #444444 ;
    white-space : nowrap ;
    padding : 1px 1px 1px 1px ;
    font-weight : bold ;
}
tr.listitem1 td
{
    border-left : solid 1px #BBBBBB ;
    border-bottom : solid 1px #BBBBBB ;
    background-color : #FFFFFF ;
    padding : 1px 1px 1px 1px ;
    text-indent : 1px ;
}
tr.listitem2 td
{
    border-left : solid 1px #BBBBBB ;
    border-bottom : solid 1px #BBBBBB ;
    background-color : #F6F6F6 ;
    padding : 1px 1px 1px 1px ;
    text-indent : 1px ;
}
tr.over td
{
    border-left : solid 1px #BBBBBB ;
    border-bottom : solid 1px #BBBBBB ;
    background-color : #FEE6BA ;
    padding : 1px 1px 1px 1px ;
    text-indent : 1px ;
}
.cmdtd
{
    text-align : center ;
}

    服务器event handler:

protected   void  cmdView_Click( object  sender, CommandEventArgs e)
{
     this .Response.Redirect( " TemplateEdit.aspx?op=view& "   +   " id= "   +  e.CommandArgument.ToString());
}
protected   void  cmdEdit_Click( object  sender, CommandEventArgs e)
{
     this .Response.Redirect( " TemplateEdit.aspx?op=edit& "   +   " id= "   +  e.CommandArgument.ToString());
}

    效果（第4行为鼠标所在的行）: