HTML तालिका में कॉलम कैसे छिपाएं?

Question

मैंने एएसपीएक्स में एक टेबल बनाई है। मैं आवश्यकता के आधार पर कॉलम में से एक को छिपाना चाहता हूं लेकिन एचटीएमएल टेबल बिल्डिंग में visible जैसी कोई विशेषता नहीं है। मैं अपनी समस्या कैसे हल कर सकता हूं?

Answer 1

इस उद्देश्य के लिए आपको स्टाइल शीट का उपयोग करने की आवश्यकता है।

<td style="display:none;"> 

Answer 2

तुम भी क्या देव बनाम कॉलम के माध्यम से पुनरावृत्ति और उस शैली के लिए एक विशिष्ट सूचकांक में टीडी तत्व की स्थापना द्वारा जावास्क्रिप्ट के साथ शैली बताए द्वारा प्रोग्राम के रूप में पता चलता है कर सकते हैं।

Answer 3

आप भी उपयोग कर सकते हैं:

<td style="visibility:hidden;"> 
or 
<td style="visibility:collapse;"> 

उन दोनों के बीच अंतर यह है कि "छिपा" सेल छुपाता है लेकिन यह स्थान होता है लेकिन "पतन" के साथ अंतरिक्ष प्रदर्शन जैसे नहीं ठहराया जाता है: कोई नहीं। पूरे कॉलम या पंक्ति को मजाक करते समय यह महत्वपूर्ण है।

Answer 4

आप एक पूरे स्तंभ को छिपाने के लिए nth-child सीएसएस चयनकर्ता का उपयोग कर सकते हैं:

#myTable tr > *:nth-child(2) { 
    display: none; 
} 

यह धारणा है कि स्तंभ के एक सेल एन तहत काम करता है (यह हो एक th या td) हमेशा की वां बच्चा तत्व है इसके पंक्ति।

Here's a demo.

---

आप स्तंभ संख्या गतिशील होना चाहते हैं, तो आप कर सकता है कि querySelectorAll या किसी ढांचे का उपयोग कर यहाँ jQuery की तरह इसी तरह की सुविधा पेश,:

$('#myTable tr > *:nth-child(2)').hide(); 

Demo with jQuery

(jQuery समाधान भीपर काम करता है)।

Answer 5

कोस का जवाब लगभग सही है, लेकिन हानिकारक दुष्प्रभाव हो सकते हैं। यह और अधिक सही है:

#myTable tr td:nth-child(1), #myTable th:nth-child(1) { 
    display: none; 
} 

सीएसएस (व्यापक स्टाइल शीट्स) झरना अपने बच्चों की सभी विशेषताओं होगा। इसका मतलब है कि *:nth-child(1) प्रत्येक trऔर के पहले td बच्चों के पहले तत्व को छुपाएंगे td को पहले td छुपाएगा। यदि आपके td में से कोई भी बटन, आइकन, इनपुट या चयन जैसी चीजें हैं, तो पहला छुपाया जाएगा (woops!)।

यदि आप वर्तमान में में ऐसी चीजें हैं जो छुपाए जाएंगे, तो आपको एक को जोड़ने की आवश्यकता होने पर सड़क पर अपनी निराशा को चित्रित करें। अपने भविष्य के अपने आप को दंडित न करें, यह डीबग करने का दर्द होगा!

मेरा उत्तर केवल और th पर tr पर पर अपने अन्य तत्वों को सुरक्षित रखेगा।th.You में मेज और .hidecol में

Answer 6

<style> 
 
.hideFullColumn tr > .hidecol 
 
{ 
 
    display:none; 
 
} 
 
</style>

उपयोग .hideFullColumn के रूप में यह समस्या होगी क्योंकि सूचकांक प्रत्येक टीडी के मन में नहीं हो सकता है व्यक्तिगत रूप से टीडी में वर्ग को जोड़ने की जरूरत नहीं है ।

Answer 7

बूटस्ट्रैप लोग कक्षा <td> पर कक्षा का उपयोग करते हैं।

Answer 8

तुम भी एक स्तंभ स्तंभ तत्व https://developer.mozilla.org/en/docs/Web/HTML/Element/col

का उपयोग कर किसी तालिका में दूसरा स्तंभ छिपाने के लिए छुपा सकते हैं:

<table> 
    <col /> 
    <col style="visibility:collapse"/> 
    <tr><td>visible</td><td>hidden</td></tr> 
    <tr><td>visible</td><td>hidden</td></tr> 

ज्ञात मुद्दे: इस गूगल क्रोम में काम नहीं करेगा। https://bugs.chromium.org/p/chromium/issues/detail?id=174167