<tr> में सीएसएस

Question

के साथ छिपाकर मैं सीएसएस में डिज़ाइन करने के लिए नया हूं। मैं एक आवश्यकता है, जिसमें मैं एक टीआर जो 2 टीडीएस

यहाँ है में एक टीडी तत्व को छिपाने के लिए है है एचटीएमएल कोड

<div class="ms-globalnavicon"> 
    <table cellpadding="0" cellspacing="0" style="border:solid 0px red;"> 
     <tr> 
      <td align="left" valign="top" style="padding-right:10px;padding-top:5px;"> 
       <a href="http://unet.unisys.com" target="_blank"> 
        <img src="/_layouts/images/SiteIcon.png" alt="Unisys"/> 
       </a> 
      </td> 
      <td align="left" valign="top" style="padding-top:9px;"> 
       <a href="http://google.com" >My Site</a>  
      </td> 
     </tr> 
    </table> 
</div> 

ऊपर एचटीएमएल कोड में है मैं अकेला 2 टीडी तत्व को छिपाने के लिए की जरूरत है सीएसएस में मैंने नीचे सीएसएस रखा है लेकिन यह दोनों टीडी छुपा रहा है। क्या कोई 1 pls मेरी मदद कर सकते हैं?

.ms-globalnavicon table tr td 
{ 
    visibility:collapse; 
} 

Answer 1

easiet/सबसे सुरक्षित तरीका लक्षित करने के लिए एक वर्ग को जोड़ने के लिए है। http://jsfiddle.net/gJvhs/

HTML:

<div class="ms-globalnavicon"> 
    <table cellpadding="0" cellspacing="0" style="border:solid 0px red;"> 
     <tr> 
      <td align="left" valign="top" style="padding-right:10px;padding-top:5px;"> 
       <a href="http://unet.unisys.com" target="_blank"> 
        <img src="/_layouts/images/SiteIcon.png" alt="Unisys"/> 
       </a> 
      </td> 
<!-- added the class here --><td class="hideANDseek" align="left" valign="top" style="padding-top:9px;"> 
       <a href="http://google.com" >My Site</a>  
      </td> 
     </tr> 
    </table> 
</div> 

सीएसएस:

.hideANDseek 
{ 
    display: none; 
} 

---

संपादित करें: या आप उस वर्ग को जोड़ने के लिए jQuery इस्तेमाल कर सकते हैं।

http://jsfiddle.net/gJvhs/1/ - crossbrowser काम करता है (यह भी IE6 +)

---

संपादित करें: एक और बात .. http://sizzlejs.com/ - https://github.com/jquery/sizzle/wiki/Sizzle-Home

Answer 2

आप last-child चयनकर्ता का उपयोग केवल पिछले टीडी आप टीडी आप छिपाना चाहते हैं और लक्ष्य है कि विशेष रूप से करने के लिए एक वर्ग जोड़ना चाहिए मिलान किया सेट में, या बेहतर ब्राउज़र संगतता के लिए लक्षित करने के लिए कर सकते हैं।

.ms-globalnavicon table tr td:last-child 
{ 
    visibility:collapse; 
} 

संपादित करें: ठीक है, तो हम बेहतर आईई समर्थन की जरूरत है, और हम शुद्ध सीएसएस का उपयोग करना होगा।

.ms-globalnavicon table tr td 
{ 
    display:none; 
} 
.ms-globalnavicon table tr td:first-child 
{ 
    display:block; 
} 

(नोट: visibility बजाय display उपयोग कर, और block बल्कि table-cell से उपयोग करते हुए) यहाँ एक समाधान है कि तथ्य यह है IE7 और 8 समर्थन first-child कर पर निर्भर करता है

http://jsfiddle.net/BL6nU/2/ (लाल बॉर्डर के साथ जोड़ा स्पष्टता के लिए)

Answer 3

<td> तत्व id तत्व देने का प्रयास करें और id प्रासंगिक सीएसएस स्टाइल असाइन करें। यह काम कर सकता है।

Answer 4

आप की जरूरत है display:none;

http://jsfiddle.net/9cPYN/

Answer 5

काम करता है इसके बाद के संस्करण समाधान है, लेकिन इस का उपयोग करने के अपने सेल को दिखाने के लिए प्रयास करें:

display: table-cell //show the cells