Таблица Row, можете ли вы установить высоту в ноль?

Можно ли установить высоту строки таблицы в 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>

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>

Ответы

Ответ 1

Я не думаю, что трюк 0-рядной высоты отлично работает, так или иначе - с Firefox и IE он делает более плотную границу в верхней части таблицы. Это может не иметь значения для вас, если вы отключите границы (хотя, я думаю, вы все равно получите пустую строку из 1 пикселя в верхней части таблицы). Многие веб-дизайнеры используют в своем первом ряду разделительные гифы (1x1 прозрачный gif, размер которых соответствует соответствующей ширине), чтобы получить тот же эффект, который решает обе проблемы.

Ответ 2

Вы можете скрыть строку с помощью дисплея: нет, если хотите, но я предполагаю, что браузеры всегда будут давать поля минимальной высоты 1px

Ответ 3

так как у меня должно быть 50 комментариев, я отправлю ответ.

Я думаю, что вы можете сделать с помощью простого javascript, Я использовал пример фруктов. надеюсь, вы не против.

Нажмите Эта скрипта, чтобы увидеть, что делает код ниже. И если это то, что вы хотите.:)

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>

и некоторый 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>.