表格行，您可以将高度设置为零吗？

Can you set a table row height to 0? IE 8, Chrome, Firefox, Opera.

你可以将表行高度设置为0吗? IE 8,Chrome,Firefox,Opera。

Why, you ask! Well, I have a row which is dynamically built and displayed when a user clicks a parent row. The trouble is that if there is no rows, when clicked, it still displays an empty 1 pixel high row.

你为什么问!好吧,我有一行是在用户点击父行时动态构建和显示的。麻烦的是,如果没有行,单击时,它仍会显示一个空的1像素高行。

This is the child gridview:

这是孩子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>

CSS:

.hidden-column 
{
    display: none;  
}

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>

5 个解决方案

#1

I don't think the 0-row-height trick works perfectly, anyway - with Firefox and IE it makes a fatter border on the top of the table. This may not matter to you if you turn borders off (although I think you still get a blank 1 pixel row at the top of the table). Many web designers use spacer gifs (a 1x1 transparent gif, sized to the appropriate width) in their first row to get the same effect which solves both problems.

无论如何,我认为0行高度的技巧并不完美 - 使用Firefox和IE它会在桌面上形成一个更胖的边界。如果关闭边框,这对你来说可能无关紧要(尽管我认为你仍然会在表格顶部找到一个空白的1像素行)。许多网页设计师在第一行使用间隔Gif(1x1透明gif,大小适当宽度)以获得相同的效果,从而解决了这两个问题。

#2

You can hide a row via display: none if you want, but I assume that browsers will always give boxes a minimum height of 1px

如果你愿意,你可以通过display:none隐藏一行,但我认为浏览器总是给盒子的最小高度为1px

#3

since I must have 50 rep to comment, I'll post an answer.

因为我必须有50个代表发表评论,我会发一个答案。

I think what you want can be done with plain javascript, I've used an example of fruit. hope you don't mind.

我认为你想要的东西可以用普通的javascript完成,我用了一个水果的例子。希望你不要介意。

Click on This Fiddle to see what the code below does. And if it's what you want. :)

单击This Fiddle以查看下面的代码。如果这是你想要的。 :)

javascript:

$(document).ready(function(){
$(".toggler").click(function(e){
    e.preventDefault();
    $('.fruit'+$(this).attr('data-prod-fruit')).toggle();
});

});

Html:

<table>
<tr>
    <td>Product</td>
    <td>Price</td>
    <td>Destination</td>
    <td>Updated on</td>
</tr>
<tr>
    <td>Oranges</td>
    <td>100</td>
    <td><a href="#" class="toggler" data-prod-fruit="1">+ On Store</a></td>
    <td>22/10</td>
</tr>
<tr class="fruit1" style="display:none">
    <td></td>
    <td>120</td>
    <td>City 1</td>
    <td>22/10</td>
</tr>
<tr class="fruit1" style="display:none">
    <td></td>
    <td>140</td>
    <td>City 2</td>
    <td>22/10</td>
</tr>
<tr>
    <td>Apples</td>
    <td>100</td>
    <td><a href="#" class="toggler" data-prod-fruit="2">+ On Store</a></td>
    <td>22/10</td>
</tr>
<tr class="fruit2" style="display:none">
    <td></td>
    <td>120</td>
    <td>City 1</td>
    <td>22/10</td>
</tr>
<tr class="fruit2" style="display:none">
    <td></td>
    <td>140</td>
    <td>City 2</td>
    <td>22/10</td>
</tr>

and some CSS to make it look pretty:

和一些CSS使它看起来很漂亮:

table{
    border-collapse: collapse;
    border-style: hidden;
    margin:0 auto 0 auto;
    position:relative;
    width:100%;
    font-size:12px;
    background-color:#edf1f7;
}

table td, table th {
    border: 1px solid black;
    height:30px;
}

#4

td {
    line-height: 0;
    padding: 0;
}
tr {
    border-spacing: 0;
}

#5

-1

A good starting point would be to set overflow:hidden on the style for the <td> elements.

一个好的起点是设置溢出:隐藏在元素的样式上。

#1

#2