用<tr>隐藏用CSS

我是新来的CSS设计。我有，我有隐藏其中有2个TDS用<tr>隐藏用CSS

这里TR一个TD元素的要求是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>

在上面的HTML代码，我需要独自隐藏第二个TD元素在CSS中。我把下面的CSS，但它隐藏了两个td的。可以有任何帮助我吗？

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

来源

2011-08-07 user318197

Easiet /最安全的办法是增加一类的目标。 http://jsfiddle.net/gJvhs/

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

CSS：

.hideANDseek 
{ 
    display: none; 
}

编辑：或者你可以使用jQuery添加类。

http://jsfiddle.net/gJvhs/1/ - 工程跨浏览器（也IE6 +）

编辑：另一件事.. http://sizzlejs.com/ - https://github.com/jquery/sizzle/wiki/Sizzle-Home

来源

2011-08-07 16:43:23 Joonas

可以使用last-child选择仅定位到最后TD在匹配设置，或者更好的浏览器兼容性，你应该添加一个类你想隐藏特别是TD和目标。

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

编辑：好了，所以我们需要更好的IE浏览器的支持，我们必须使用纯CSS。下面是依赖于事实的IE7和8做支撑first-child的解决方案：

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

（注：使用display而不是visibility，并使用block而非table-cell）

http://jsfiddle.net/BL6nU/2/（带红色边框添加为清晰起见）

来源

2011-08-07 16:40:25 shanethehat

+1 - 这会起作用，但在您想要的td元素上添加一个id并将id设为目标更强大的变化。我也相信它可以在不同/较旧的浏览器中更一致地工作。 –

我正在编辑的效果，因为你评论:) – shanethehat

嗨，谢谢一吨真正有效的答案。 – user318197

尝试给第1个<td>元素id并分配相关的css样式id。这可能工作。

来源

2011-08-07 16:41:07 RSM

你需要display:none;

http://jsfiddle.net/9cPYN/

来源

2011-08-07 16:41:44

上述工程的解决方案，但尝试用它来显示你的细胞：

display: table-cell //show the cells

来源

2013-08-13 14:33:48

用<tr>隐藏​​用CSS

回答

相关问题

用<tr>隐藏用CSS