2011-08-07 15 views
8

Soy nuevo en el diseño en CSS. Tengo un requisito en el que tengo que ocultar un elemento td en un tr que tiene 2 TDSOcultar un <td> en un <tr> con CSS

aquí está el código 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> 

En el código HTML anterior que necesito para ocultar el elemento de segunda td solos en CSS. Puse el siguiente CSS pero está ocultando los dos tds. ¿Puede cualquier 1 pls ayudarme?

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

Respuesta

9

easiet/forma más segura es agregar una clase para apuntar. 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; 
} 

Editar: O usted podría utilizar jQuery para agregar esa clase.

http://jsfiddle.net/gJvhs/1/ - obras crossbrowser (también IE6 +)


Editar: Otra cosa .. http://sizzlejs.com/ - https://github.com/jquery/sizzle/wiki/Sizzle-Home

6

Puede utilizar el selector de last-child sólo para dirigirse a la última td en el conjunto combinado, o para una mejor compatibilidad con los navegadores se debe añadir una clase a la td desea ocultar y objetivo que específicamente.

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

Editar: Ok, por lo que necesitamos un mejor soporte IE, y tenemos que usar CSS puro. Aquí es una solución que se basa en el hecho de la IE7 y 8 hacen de soporte first-child:

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

(nota: el uso de display en lugar de visibility, y el uso de block en lugar de table-cell)

http://jsfiddle.net/BL6nU/2/ (con borde rojo añadido para mayor claridad)

+2

+1 - Esto funciona, pero poner una identificación en el elemento td que desea y apuntar a la identificación sería más robusto para cambiar. También creo que funcionará de manera más consistente en navegadores diferentes/más antiguos. –

+0

Estaba editando para ese efecto mientras comentabas :) – shanethehat

+0

Hola, muchas gracias por la respuesta que realmente funcionó. – user318197

1

intente dar el elemento 1 <td> un id y asigne el estilo CSS correspondiente que id. Esto puede funcionar

1

La solución anterior funciona, pero trata de usar esto para mostrar sus células:

display: table-cell //show the cells 
Cuestiones relacionadas