it-swarm.com.ru

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

Я новичок в проектировании в CSS. У меня есть требование, в котором я должен скрыть элемент td в tr, который имеет 2 tds

вот код 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, но он скрывает оба тд. может любой 1 пожалуйста помогите мне?

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

Самый простой/безопасный способ - добавить класс к цели. 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: Или вы можете использовать jquery для добавления этого класса.

http://jsfiddle.net/gJvhs/1/ - работает кроссбраузер (также ie6 +)


Правка: Другое дело .. http://sizzlejs.com/ - https://github.com/jquery/sizzle/wiki/Sizzle-Home

9
Joonas

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

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

Edit: Хорошо, нам нужна лучшая поддержка 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/ (с красной рамкой для ясности)

8
shanethehat

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

http://jsfiddle.net/9cPYN/

2
Jason Gennaro

Решение выше работает, но попробуйте использовать это, чтобы показать ваши клетки:

display: table-cell //show the cells
1
Andre Silva

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

1
RSM