Ukrywanie <td> w <tr> z CSS

Question

Jestem nowy w projektowaniu w CSS. Mam wymaganie, w którym muszę ukryć element td w tr który posiada 2 TDS

Oto kod 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> 
      <td align="left" valign="top" style="padding-top:9px;"> 
       <a href="http://google.com" >My Site</a>  
      </td> 
     </tr> 
    </table> 
</div> 

w powyższym HTML kod muszę ukryć sam 2nd td elementu w CSS. Umieściłem poniższy CSS, ale ukrywa on oba td. Czy jakikolwiek 1 pls mi pomoże?

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

Answer 1

Najprościej/najbezpieczniej jest, aby dodać klasę do celu. 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> 

CSS:

.hideANDseek 
{ 
    display: none; 
} 

---

Edit: Albo można użyć jQuery aby dodać tę klasę.

http://jsfiddle.net/gJvhs/1/ - działa crossbrowser (również IE6 +)

---

Edit: Inną rzeczą .. http://sizzlejs.com/ - https://github.com/jquery/sizzle/wiki/Sizzle-Home

Answer 2

Można użyć selektora last-child się kierować tylko ostatniego td w dopasowanego zestawu, lub dla lepszej kompatybilności przeglądarki należy dodać klasę do tego specjalnie td, który chcesz ukryć i cel.

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

Edit: Ok, więc musimy lepsze wsparcie IE, i musimy użyć czystego CSS. Oto rozwiązanie, które opiera się na rzeczywistości IE7 i 8 obsługują first-child:

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

(uwaga: przy użyciu display zamiast visibility i używając block zamiast table-cell)

http://jsfiddle.net/BL6nU/2/ (z czerwonym obramowaniem dodany dla jasności)

Answer 3

spróbuj dając 1st <td> elementu id i przypisać odpowiednią css stylizacji że id. To może zadziałać.

Answer 4

Trzeba display:none;

http://jsfiddle.net/9cPYN/

Answer 5

Rozwiązaniem powyższego działa, ale starają się to wykorzystać, aby pokazać swoje komórki:

display: table-cell //show the cells