使用 CSS 将 <td> 隐藏在 <tr> 中

Question

我必须在 --- 中隐藏一个 tr td 元素，它有 2 td s

这是 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 s。

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

原文由 user318197 发布，翻译遵循 CC BY-SA 4.0 许可协议

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/ - 适用于跨浏览器（也适用于 ie6+）

---

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

原文由 Joonas 发布，翻译遵循 CC BY-SA 4.0 许可协议

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/ （为清楚起见添加了红色边框）

原文由 shanethehat 发布，翻译遵循 CC BY-SA 3.0 许可协议