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> </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="http://www.cnblogs.com/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="http://www.cnblogs.com/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="http://www.cnblogs.com/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="http://www.cnblogs.com/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行为鼠标所在的行）: