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

Options

Plusieurs options s'offrent à vous (trop nombreuses pour être toutes citées). En fonction de votre tentative, voici quelques unes des plus populaires :

1. Utiliser l'opérateur de fratrie
2. Utiliser nth-of-type
3. Styliser directement (ajouter une classe/ID à la ligne et définir display:none pour cette classe/id)

---

Démonstrations

1. Opérateur de la fratrie ( + )

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

.ms-globalnavicon table tr td+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>

2. Nième du type

.ms-globalnavicon table tr td:nth-of-type(2n){
   display: none;
}

.ms-globalnavicon table tr td:nth-of-type(2n) {
  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>
      <td align="left" valign="top" style="padding-top:9px;">
        <a href="http://google.com">Link 1</a>
      </td>
      <td align="left" valign="top" style="padding-top:9px;">
        <a href="http://google.com">Link 2</a>
      </td>
    </tr>
  </table>
</div>

Answer 2

DU, le site web MAmirHamza.com Utilisez les deux lignes ensemble, comme suit

.table-right-1 { 
    visibility: hidden;
    display: none;
}