使用CSS隐藏<tr>中的<td>

Question

我不熟悉CSS设计.我有一个要求,我必须在一个有2个tds的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代码中,我需要在CSS中单独隐藏第二个td元素.我把下面的CSS,但它隐藏了两个td的.可以任何一个帮助我吗？

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

Answer 1

最安全/最安全的方法是向目标添加一个类.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>

编辑:或者您可以使用jquery添加该类.

http://jsfiddle.net/gJvhs/1/ - 作品crossbrowser(也就是ie6 +)

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

Answer 2

您可以使用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/(为清晰起见,添加了红色边框)