web-dev-qa-db-fra.com

Cacher un <td> dans un <tr> avec CSS

Je suis novice dans la conception en CSS. J'ai une exigence dans laquelle je dois cacher un élément td dans un tr qui a 2 tds

voici le code 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>

Dans le code HTML ci-dessus, je dois masquer le deuxième élément td uniquement en CSS. Je mets le CSS ci-dessous mais il cache les deux td. 1 pls peut-il m'aider?

.ms-globalnavicon table tr td 
{
    visibility:collapse;
}
htmlcsshtml-tablehiding
9
user318197

Le moyen le plus simple et le plus sûr consiste à ajouter une classe à cibler. http://jsfiddle.net/gJvhs/

.hideANDseek {
  display: none;
}
<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>

Edit: Vous pouvez également utiliser jQuery pour ajouter cette classe.

http://jsfiddle.net/gJvhs/1/ - fonctionne avec crossbrowser (ie6 +)

Edit: Une autre chose .. http://sizzlejs.com/ - https://github.com/jquery/sizzle/wiki/Sizzle-Home

9
Joonas

Vous pouvez utiliser le sélecteur last-child pour ne cibler que le dernier td du jeu correspondant. Pour une meilleure compatibilité du navigateur, vous devez ajouter une classe au td que vous souhaitez masquer et cibler spécifiquement.

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

Edit: Ok, nous avons donc besoin d’un meilleur support IE, et nous devons utiliser du CSS pur. Voici une solution qui repose sur le fait que IE7 et 8 prennent en charge first-child:

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

(note: en utilisant display au lieu de visibility et en utilisant block au lieu de table-cell)

http://jsfiddle.net/BL6nU/2/ (avec une bordure rouge ajoutée pour plus de clarté)

8
shanethehat

Vous avez besoin de display:none;

http://jsfiddle.net/9cPYN/

2
Jason Gennaro

La solution ci-dessus fonctionne, mais essayez de l'utiliser pour afficher vos cellules:

display: table-cell //show the cells
1
Andre Silva

essayez d'attribuer id au 1er élément <td> et d'attribuer le style CSS correspondant à id. Cela peut fonctionner.

1
RSM