Home/ Questions/Q 6250453
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T13:25:35+00:00

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

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Easiet / safest way is to add a class to target. 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: Or you could use jquery to add that class.

    http://jsfiddle.net/gJvhs/1/ – works crossbrowser ( also ie6+)

    Edit: Another thing.. http://sizzlejs.com/ – https://github.com/jquery/sizzle/wiki/Sizzle-Home

    • 0