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

Hiding a <td> in a <tr> with CSS

提问by user318197

I have to hide a tdelement in a trwhich has 2 tds

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

Here is the HTML code:

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

In the above HTML code I need to hide the 2nd tdelement alone in CSS. I put the below CSS but it is hiding both the tds.

在上面的 HTML 代码中，我需要td在 CSS 中单独隐藏第二个元素。我把下面的 CSS 但它隐藏了两个tds。

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

采纳答案by Joonas

Easiet / safest way is to add a class to target. http://jsfiddle.net/gJvhs/

最简单/最安全的方法是向目标添加一个类。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 could use jquery to add that class.

编辑：或者您可以使用 jquery 添加该类。

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

http://jsfiddle.net/gJvhs/1/- 跨浏览器工作（也是 ie6+）

---

---

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

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

回答by shanethehat

You can use the last-childselector to only target the last td in the matched set, or for better browser compatibility you should add a class to the td you want to hide and target that specifically.

您可以使用last-child选择器仅针对匹配集中的最后一个 td，或者为了更好的浏览器兼容性，您应该向要隐藏的 td 添加一个类并专门针对它。

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

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

编辑：好的，所以我们需要更好的 IE 支持，我们必须使用纯 CSS。这是一个依赖于 IE7 和 8 支持的解决方案first-child：

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

(note: using displayrather than visibility, and using blockrather than table-cell)

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

http://jsfiddle.net/BL6nU/2/(with red border added for clarity)

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

回答by Andre Silva

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

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

display: table-cell //show the cells

回答by Jason Gennaro

You need display:none;

你需要 display:none;

http://jsfiddle.net/9cPYN/

http://jsfiddle.net/9cPYN/

回答by vol7ron

Options

选项

You have several options (too many to list them all). Here are some popular ones based on your attempt:

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

1. Use the sibling operator
2. Use nth-of-type
3. Directly style (add a class/ID to the row and set display:nonefor that class/id)

1. 使用兄弟操作符
2. 使用第 n 个类型
3. 直接样式（在行中添加一个类/ID 并display:none为该类/ID 设置）

---

---

Demonstrations

示威游行

1. Sibling operator (+)

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. Nth-of-type

2. Nth-of-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>

回答by RSM

try giving the 1st <td>element an idand assign the relevant css styling that id. This may work.

尝试给第一个<td>元素 anid并分配相关的 css 样式id。这可能有效。