1. 禁止文本换行的CSS: white-space:nowrap;
strict mode下在IE7和FF中都正常,以前IE用的word-break、word-wrap属性对FF无效。
2. Repeater控件,交替显示table行的背景颜色,鼠标移动到某一行时用特殊背景显示。
方法purecss给出了很多种,看了一下现在新浪邮箱,使用的也是文章中选择的方法。
repeater控件:
<asp:RepeaterID="Repeater1"runat="server">
<HeaderTemplate>
<tableclass="list"cellpadding="0"cellspacing="0">
<trclass="listheader">
<th> </th>
<th>查看</th>
<th>编辑</th>
<th>模板ID</th>
<th>用户编号</th>
<th>描述</th>
<th>状态</th>
<th>控制类</th>
<th>模板内容</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<trclass="listitem1"onmouseover="this.className='over'"onmouseout="this.className='listitem1'">
<tdclass="cmdtd">
<asp:CheckBoxID="CheckBox1"runat="server"/>
<asp:HiddenFieldID="templateID"runat="server"Value='<%#DataBinder.Eval(Container.DataItem,"ID")%>'/>
</td>
<tdclass="cmdtd">
<asp:ImageButtonID="cmdView"runat="server"ImageUrl="/Skin/default/icon_view.gif"CausesValidation="False"
OnCommand="cmdView_Click"CommandArgument='<%#DataBinder.Eval(Container.DataItem,"ID")%>'>
</asp:ImageButton>
</td>
<tdclass="cmdtd">
<asp:ImageButtonID="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>
<textareaid="Textarea1"rows="3"class="textbox"readonly="readonly"cols="20"style="width:400px;">
<%#DataBinder.Eval(Container.DataItem,"Content.Content")%>
</textarea>
</td>
</tr>
</ItemTemplate>
<AlternatingItemTemplate>
<trclass="listitem2"onmouseover="this.className='over'"onmouseout="this.className='listitem2'">
<tdclass="cmdtd">
<asp:CheckBoxID="CheckBox1"runat="server"/>
<asp:HiddenFieldID="templateID"runat="server"Value='<%#DataBinder.Eval(Container.DataItem,"ID")%>'/>
</td>
<tdclass="cmdtd">
<asp:ImageButtonID="cmdView"runat="server"ImageUrl="/Skin/default/icon_view.gif"CausesValidation="False"
OnCommand="cmdView_Click"CommandArgument='<%#DataBinder.Eval(Container.DataItem,"ID")%>'>
</asp:ImageButton>
</td>
<tdclass="cmdtd">
<asp:ImageButtonID="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>
<textareaid="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:solid1px#888888;
border-top:solid1px#888888;
}
tr.listheadertd,th
{
border-left:solid1px#BBBBBB;
border-bottom:solid1px#BBBBBB;
background-color:#E6F6F6;
color:#444444;
white-space:nowrap;
padding:1px1px1px1px;
font-weight:bold;
}
tr.listitem1td
{
border-left:solid1px#BBBBBB;
border-bottom:solid1px#BBBBBB;
background-color:#FFFFFF;
padding:1px1px1px1px;
text-indent:1px;
}
tr.listitem2td
{
border-left:solid1px#BBBBBB;
border-bottom:solid1px#BBBBBB;
background-color:#F6F6F6;
padding:1px1px1px1px;
text-indent:1px;
}
tr.overtd
{
border-left:solid1px#BBBBBB;
border-bottom:solid1px#BBBBBB;
background-color:#FEE6BA;
padding:1px1px1px1px;
text-indent:1px;
}
.cmdtd
{
text-align:center;
} 服务器event handler:
protectedvoidcmdView_Click(objectsender,CommandEventArgse)
{
this.Response.Redirect("TemplateEdit.aspx?op=view&"+"id="+mandArgument.ToString());
}
protectedvoidcmdEdit_Click(objectsender,CommandEventArgse)
{
this.Response.Redirect("TemplateEdit.aspx?op=edit&"+"id="+mandArgument.ToString());
} 效果(第4行为鼠标所在的行):