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

Question

Je dois cacher un td dans un tr qui compte 2 td s

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, j'ai besoin de masquer le 2ème td seul en CSS. J'ai mis le CSS ci-dessous mais il cache à la fois l'élément td s.

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

<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>

Answer 1

La méthode la plus simple et la plus sûre consiste à ajouter une classe à la cible. 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>

---

Editer : Vous pouvez également utiliser jquery pour ajouter cette classe.

http://jsfiddle.net/gJvhs/1/ - fonctionne avec tous les navigateurs (y compris ie6+)

---

Editer : Autre chose http://sizzlejs.com/ - https://github.com/jquery/sizzle/wiki/Sizzle-Home

Answer 2

Vous pouvez utiliser le last-child pour ne cibler que la dernière td de l'ensemble correspondant, ou pour une meilleure compatibilité avec les navigateurs, vous devriez ajouter une classe à la td que vous voulez cacher et la cibler spécifiquement.

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

Editer : Ok, nous avons besoin d'une meilleure prise en charge d'IE, et nous devons utiliser du CSS pur. Voici une solution qui s'appuie sur le fait qu'IE7 et 8 supportent first-child :

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

(note : l'utilisation de display plutôt que visibility et en utilisant block plutôt que table-cell )

http://jsfiddle.net/BL6nU/2/ (avec un cadre rouge ajouté pour plus de clarté)

Answer 3

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

display: table-cell //show the cells

Answer 4

Vous avez besoin display:none;

http://jsfiddle.net/9cPYN/

Answer 5

Essayez de donner au 1er <td> un élément id et lui assigner le style css approprié id . Cela peut fonctionner.