Скрытие <td>в <tr>с помощью CSS

Question

Я должен скрыть td элемент в tr, который имеет 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-коде мне нужно скрыть только 2-й элемент td в CSS. Я поставил ниже 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>

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

Answer 2

Вы можете использовать селектор last-child для нацеливания только на последний тд в сопоставленном наборе, или для лучшей совместимости с браузером вы должны добавить класс к тд, который хотите скрыть, и нацелиться именно на него.

.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: table-cell //show the cells

Answer 4

Вам нужно display:none;

http://jsfiddle.net/9cPYN/

Answer 5

Параметры

У вас есть несколько вариантов (слишком много, чтобы перечислить их все).Вот некоторые популярные, основанные на вашей попытке:

1. Использовать оператор родного брата
2. Использовать nth-of-type
3. Непосредственный стиль (добавить класс / ID кстрока и набор display:none для этого класса / id)

---

Демонстрации

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.N-ный тип

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

Answer 6

попробуйте присвоить 1-му <td> элементу id и назначить соответствующий стиль CSS, который id. Это может сработать.