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

93

मैंने ASPX में एक तालिका बनाई है। मैं आवश्यकता के आधार पर स्तंभों में से एक को छिपाना चाहता हूं, लेकिन visibleHTML तालिका भवन में कोई विशेषता नहीं है । मैं अपनी समस्या कैसे हल कर सकता हूं?

html asp.net html-table

— user601367
स्रोत

169

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

<td style="display:none;">

— Anuraj
स्रोत

1

एचटीएमएल के सीएसएस का उपयोग करके केवल पहले कोलॉम्न के बारे में क्या है

— कार्यालय 302

जब मैं जावास्क्रिप्ट क्रिएपीमेंट (td) का उपयोग करके तालिका बना रहा हूं तो मुझे इसमें शैली कैसे जोड़नी चाहिए;

— कार्यालय 302

1

@ office302 इस शैली को केवल पहले td पर लागू करें? या आप केवल CSS का उपयोग करना चाहते हैं - यह आप कुछ इस तरह कर सकते हैंtd:first-child { display:none; }

— Anuraj

@ अनुराज यह ध्यान दिया जाना चाहिए कि: पहले बच्चे आदि का समर्थन किया जाता है> IE 11 और एज, वैसे भी एक अच्छा

— विटाली टेरेज़िव

87

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

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

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

यहाँ एक डेमो है।

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

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

JQuery के साथ डेमो

(JQuery समाधान विरासत ब्राउज़रnth-child पर भी काम करता है जो समर्थन नहीं करता है )।

— कोस
स्रोत

1

इससे हानिकारक दुष्प्रभाव हो सकते हैं, एक बेहतर समाधान के लिए नीचे मेरा जवाब देखें ।

— रिक स्मिथ

@RickSmith अच्छा बिंदु। किसी अन्य तरीके से समस्या से बचने के लिए मेरी पोस्ट अपडेट करें (बच्चे चयनकर्ता का उपयोग करके)।

— कोस

बच्चे का चयनकर्ता निश्चित रूप से बेहतर है। अच्छा उत्तर।

— रिक स्मिथ

अच्छा समाधान लेकिन कोल्प्सन मामले पर थोड़ा और विचार करने की आवश्यकता है।

— सिनेसॉ

30

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

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

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

— डो मिलर
स्रोत

1

मैंने पाया है कि div टैग्स के पतन के लिए भी स्थान होगा। Div टैग के लिए आपको प्रदर्शन का उपयोग करना होगा: कोई नहीं; वास्तव में पतन और अंतरिक्ष को पकड़ने के लिए नहीं।

— डोवर मिलर

5

visibility: collapseविशेष रूप से सेल को दिखाने / छुपाने के लिए डिज़ाइन किया गया है, क्योंकि सेल चौड़ाई / ऊंचाई को इस और के बीच पुनर्गणना करते समय अंतर होता है display:none। देखें डेवलपर.

— mozilla.org/en-US/docs/Web/CSS/visibility#Values

28

कोस का उत्तर लगभग सही है, लेकिन इसके हानिकारक प्रभाव हो सकते हैं। यह अधिक सही है:

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

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

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

मेरा उत्तर केवल आपके अन्य तत्वों को सुरक्षित रखने में पहले tdऔर thसभी trको छिपाएगा #myTable।

— रिक स्मिथ
स्रोत

10

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

— theapache64
स्रोत

6

आप कॉल तत्व https://developer.mozilla.org/en/docs/Web/HTML/lementman/col का उपयोग करके एक कॉलम भी छिपा सकते हैं

तालिका में दूसरा कॉलम छिपाने के लिए:

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

ज्ञात समस्याएँ: यह Google Chrome में काम नहीं करेगा। कृपया https://bugs.chromium.org/p/chromium/issues/detail?id=1717167 पर बग के लिए वोट करें

— कर्नल आतंक
स्रोत

2

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

स्निपेट का विस्तार करें

तालिका में .hideFullColumn और th .hidecol का उपयोग करें। आपको व्यक्तिगत रूप से td में कक्षा जोड़ने की आवश्यकता नहीं है क्योंकि यह समस्या होगी क्योंकि सूचकांक प्रत्येक td के दिमाग में नहीं हो सकता है।

— सौविक बस गया
स्रोत

1

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

— tamarintech
स्रोत

0

<!doctype html>
<html lang="en">
<head>
<style id="myStyleSheet">
...
</style>

var column = 3;
var styleSheet = document.getElementById("myStyleSheet").sheet;
var rule = "table  tr td:nth-child("+ column +"),table th:nth-child("+ column +") 
{display: none}";
styleSheet.insertRule(rule);

— अल्बर्ट
स्रोत

2

आशा है कि यह समस्या को हल कर देगा, लेकिन कृपया इसके साथ अपने कोड की व्याख्या जोड़ें ताकि उपयोगकर्ता को सही समझ मिल जाएगी जिसे वह / वह वास्तव में चाहता है।

— जयमिल पटेल