你可以将表格行高度设置为0吗?IE 8,Chrome,Firefox,Opera.
你为什么问!好吧,我有一行是在用户点击父行时动态构建和显示的.麻烦的是,如果没有行,单击时,它仍然显示一个空的1像素高行.
这是孩子gridview:
<asp:TemplateField HeaderStyle-CssClass="hidden-column" ItemStyle-CssClass="hidden-column" FooterStyle-CssClass="hidden-column">
<ItemTemplate>
<tr>
<td colspan="8" >
<div id='<%# Eval("PublicationID") %>' style="display: none; position: relative;">
<asp:GridView ID="GridView2_ABPubs" runat="server" AutoGenerateColumns="false" Width="100%"
DataKeyNames="PublicationID" Font-Names="Verdana" Font-Size="small">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="ChildPublicationSelector" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="NameAbbrev" HeaderText="Publication Name" SortExpression="NameAbbrev" />
</Columns>
</asp:GridView>
</div>
</td>
</tr>
</ItemTemplate>
</asp:TemplateField>
Run Code Online (Sandbox Code Playgroud)
CSS:
.hidden-column
{
display: none;
}
Run Code Online (Sandbox Code Playgroud)
JavaScript的:
<script language="JavaScript" type="text/javascript">
var currentlyOpenedDiv = "";
function CollapseExpand(object) {
var div = document.getElementById(object);
//if (currentlyOpenedDiv != "" && currentlyOpenedDiv != div) {
// currentlyOpenedDiv.style.display = "none";
//}
if (div.style.display == "none") {
div.style.display = "inline";
currentlyOpenedDiv = div;
}
else {
div.style.display = "none";
}
}
</script>
Run Code Online (Sandbox Code Playgroud)
无论如何,我认为 0 行高技巧的效果并不完美 - 对于 Firefox 和 IE,它会在表格顶部产生更粗的边框。如果您关闭边框,这对您来说可能并不重要(尽管我认为您仍然会在表格顶部看到一个空白的 1 像素行)。许多网页设计师在第一行中使用间隔 gif(1x1 透明 gif,大小适当的宽度)以获得解决这两个问题的相同效果。