टेबल पंक्ति, क्या आप ऊंचाई को शून्य पर सेट कर सकते हैं?

Question

क्या आप एक टेबल पंक्ति ऊंचाई 0 पर सेट कर सकते हैं? आईई 8, क्रोम, फ़ायरफ़ॉक्स, ओपेरा।

क्यों, आप पूछते हैं! खैर, मेरे पास एक पंक्ति है जो गतिशील रूप से निर्मित और प्रदर्शित होती है जब कोई उपयोगकर्ता मूल पंक्ति पर क्लिक करता है। समस्या यह है कि यदि कोई पंक्ति नहीं है, तो क्लिक करने पर, यह अभी भी एक खाली 1 पिक्सेल उच्च पंक्ति प्रदर्शित करता है।

<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> 

सीएसएस:

.hidden-column 
{ 
    display: none; 
} 

जावास्क्रिप्ट:

यह बच्चा gridview है

<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> 

Answer 1

मुझे नहीं लगता कि 0-पंक्ति-ऊंचाई चाल पूरी तरह से काम करता है है, वैसे भी - फ़ायरफ़ॉक्स और आईई के साथ यह तालिका के शीर्ष पर एक फैटर सीमा बनाता है। यदि आप सीमाओं को बंद करते हैं तो यह आपके लिए कोई फर्क नहीं पड़ता है (हालांकि मुझे लगता है कि आपको अभी भी तालिका के शीर्ष पर एक खाली 1 पिक्सेल पंक्ति मिलती है)। कई वेब डिज़ाइनर एक ही प्रभाव प्राप्त करने के लिए स्पेसर gifs (एक 1x1 पारदर्शी gif, उचित चौड़ाई के आकार में) का उपयोग करते हैं जो दोनों समस्याओं को हल करता है।

Answer 2

आप प्रदर्शन के माध्यम से एक पंक्ति छिपा सकते हैं: अगर आप चाहते हैं कोई नहीं है, लेकिन मुझे लगता है कि ब्राउज़रों हमेशा बक्से 1px

Answer 3

की एक न्यूनतम ऊंचाई दे देंगे एक अच्छा प्रारंभिक बिंदु स्थापित करने के लिए किया जाएगा अतिप्रवाह: पर छिपा हुआ <td> तत्वों के लिए शैली।

Answer 4

क्योंकि मेरे पास टिप्पणी करने के लिए 50 प्रतिनिधि होना चाहिए, मैं एक उत्तर पोस्ट करूंगा।

मुझे लगता है कि आप सादा जावास्क्रिप्ट, के साथ क्या किया जा सकता है, मैंने फल का एक उदाहरण उपयोग किया है। आशा है कि आपको बुरा लगेगा।

नीचे दिए गए कोड को देखने के लिए This Fiddle पर क्लिक करें। और यदि आप यही चाहते हैं। :)

जावास्क्रिप्ट:

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

});

एचटीएमएल:

<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> 

और कुछ सीएसएस इसे आकर्षक बनाने के लिए:

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; 
}