Hiding a <td> in a <tr> with CSS

Question

I have to hide a td element in a tr which has 2 tds

Here is the HTML code:

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

In the above HTML code I need to hide the 2nd td element alone in CSS. I put the below CSS but it is hiding both the tds.

.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

The solution above works, but try to use this to show your cells:

display: table-cell //show the cells

Answer 2

Options

You have several options (too many to list them all). Here are some popular ones based on your attempt:

1. Use the sibling operator
2. Use nth-of-type
3. Directly style (add a class/ID to the row and set display:none for that class/id)

---

Demonstrations

1. Sibling operator (+)

.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. Nth-of-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 3

You can use the last-child selector to only target the last td in the matched set, or for better browser compatibility you should add a class to the td you want to hide and target that specifically.

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

Edit: Ok, so we need better IE support, and we have to use pure CSS. Here is a solution that relies on the fact the IE7 and 8 do support first-child:

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

(note: using display rather than visibility, and using block rather than table-cell)

http://jsfiddle.net/BL6nU/2/ (with red border added for clarity)