तालिका पंक्ति छिपी हुई है जब HTML कॉलम चौड़ाई बदलती है

Question

मैं वेब प्रोग्रामिंग के लिए एक सापेक्ष नवागंतुक हूं, इसलिए शायद मैं यहां कुछ स्पष्ट गलती कर रहा हूं।

जब मैं जावास्क्रिप्ट से पंक्तियों में पंक्ति को छिपाने की कोशिश कर रहा हूं जैसे पंक्तियों [i] .style.display = 'none', तालिका लेआउट पूरी तरह टूटा हुआ है। मूल रूप से, सेल सामग्री लपेट रही थी, और तालिका की चौड़ाई कम हो रही थी। मैंने फिर तालिका टैग और शैली = "सफेद-स्थान: अब्रैप" में प्रत्येक टीडी में शैली = "तालिका-लेआउट: तय" जोड़ा। इसने लाइन रैपिंग को रोक दिया, लेकिन फिर भी सामग्री को लाइन पर गठबंधन नहीं किया गया था। यदि स्पेस और कॉलम चौड़ाई एक पंक्ति से दूसरे में भिन्न होती है तो कोशिकाएं बाईं ओर बढ़ने लगती हैं। इसके बाद मैंने प्रत्येक वें और टीडी तत्व के लिए एक निश्चित चौड़ाई और मेज युक्त div को भी जोड़ा। फिर भी समस्या बनी रही।

मेरा वर्तमान HTML निम्न जैसा है।

---

<div style="width: 300px"> 
    <table id="errorTable" width="100%" cellpadding="5" cellspacing="2" style="table-layout: fixed"> 
    <tr id="HeaderRow"> 
     <th style="width: 100px;">Header 1</th> 
     <th style="width: 50px;">Header 2</th> 
     <th style="width: 150px;">Header 3</th> 
    </tr> 
    <tr id="DetailRow1">           
     <td style="white-space:nowrap; width: 100px;">Data 1_1 in Row 1</td> 
     <td style="white-space:nowrap; width: 50px;">Data 1_2 in Row 1</td> 
     <td style="white-space:nowrap; width: 150px;">Data 1_3 in Row 1</td> 
    </tr> 
    <tr id="DetailRow2">           
     <td style="white-space:nowrap; width: 100px;">Data 2</td> 
     <td style="white-space:nowrap; width: 50px;">Data 2</td> 
     <td style="white-space:nowrap; width: 150px;">Data 2</td> 
    </tr> 
    <tr id="DetailRow3">           
     <td style="white-space:nowrap; width: 100px;">Data 3_1</td> 
     <td style="white-space:nowrap; width: 50px;">Data 3_2</td> 
     <td style="white-space:nowrap; width: 150px;">Data 3_3</td> 
    </tr> 
    </table> 
</div> 

---

जब तालिका पहली बार प्रदर्शित किया जाता है, कॉलम क्रमशः चौड़ाई 100, 50 और 150 पिक्सेल के साथ ठीक से गठबंधन कर रहे हैं। लेकिन अगर कोई पंक्ति कहती है कि दूसरा छिपा हुआ है, तो शेष दो प्रदर्शित पंक्तियों की सेल चौड़ाई अब 100, 50 और 150 पर तय नहीं की गई है और डेटा अब लंबवत रूप से संरेखित नहीं है। कृपया ध्यान दें कि कुल तालिका चौड़ाई 300 पीएक्स बनी हुई है। यदि उपलब्ध स्थान उपलब्ध है तो प्रत्येक सेल में डेटा छोड़ दिया जाता है और अंतिम स्थान, अतिरिक्त स्थिति में, तीसरे कॉलम में अतिरिक्त स्थान का उपयोग किया जाता है।

निम्नलिखित पोस्ट सहायक थी लेकिन मेरी समस्या पूरी तरह से हल नहीं हुई, जैसा कि आप देख सकते हैं। Hiding table rows without resizing overall width

किसी भी मदद का स्वागत किया जाएगा।

Answer 1

हमेशा अपने कॉलम की चौड़ाई को ठीक करें। क्या यह आपकी समस्या का एकमात्र होगा?

.myTable td{ width:33% !important; } 

आदर्श रूप में, आप भी thead और tbody

<table> 
    <thead> 
    <tr> ... </tr> 
    </thead> 

    <tbody> 
    . 
    .  
    . 
    </tbody> 
</table> 

Answer 2

मैं एक ही समस्या आ रही है का उपयोग करते हुए शीर्ष लेख और शरीर वर्गों संलग्न करना चाहिए। मैंने प्रत्येक तालिका के अंदर एक अवधि फेंक दी ताकि यह देखने के लिए कि क्या मैं चौड़ाई को मजबूर कर सकता हूं और ऐसा लगता है। हालांकि यह बदसूरत है।

Answer 3

मुझे एक ही समस्या थी: मैंने elem.style.display="none" द्वारा कॉलम छुपाने की कोशिश की लेकिन फिर दिखाते हुए लेआउट टूट गया था। इस प्रदर्शन शैली मेरे लिए काम किया:

columns.item(i).style.display = "table-cell";