Hiding a <td> in a <tr> with CSS
The solution above works, but try to use this to show your cells:
display: table-cell //show the cells
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)
You need display:none;
http://jsfiddle.net/9cPYN/
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