用CSS隐藏一个

Question

我必须在td中隐藏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放在了CSS中，但它隐藏了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>

Answer 1

Easiet / safest方法是向目标添加一个类。 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/（为清晰起见，添加了红色边框）

Answer 3

您需要display:none;

http://jsfiddle.net/9cPYN/

Answer 4

上面的解决方案有效，但尝试使用它来显示您的单元格：

display: table-cell //show the cells

Answer 5

尝试将第一个<td>元素设为id，并指定id的相关CSS样式。这可能有用。

Answer 6

选项

您有几个选项（太多的都无法列出）。根据您的尝试，以下是一些流行的方法：

1. 使用同级运算符
2. 使用nth-of-type
3. 直接样式化（将类/ ID添加到行中，并为该类/ id设置display:none）

---

示范

1。同级运算符（+）

.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。类型的第

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