Geek Answers Handbook

Hiding <td> in <tr> with CSS

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

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 HTML above, I only need to hide the 2nd td element in CSS. I put below CSS, but it hides both td .

 .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>
+9
html css html-table
source share
6 answers

The easiest / safest way is to add a class to the 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 can use jquery to add this class.

http://jsfiddle.net/gJvhs/1/ - cross-browser works (also ie6 +)

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

+10
source share

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

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

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

 .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/ (red frame added for clarity)

+8
source share

You need display:none;

http://jsfiddle.net/9cPYN/

+2
source share

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

 display: table-cell //show the cells
+2
source share

try giving the 1st element <td> a id and assign the appropriate css style to id . It might work.

+1
source share

Options

You have several options:

  1. Use the sibling operator
  2. Use nth-of-type
  3. Immediate style (add class / id to string and set display:none for this class / id)

Demonstrations

1. Fraternal 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. N-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>
0
source share

More articles:


All Articles