CSS для скрытия нескольких столбцов в таблице

У меня есть таблица, похожая на ту, что показана ниже на сайте SharePoint. Я не могу изменить таблицу, поскольку она генерируется динамически, но я могу добавить внешний CSS, чтобы переопределить ее стиль. Я должен показать только второй столбец и скрыть первый, третий и четвертый столбцы.

Псевдокласс для скрытия первого столбца - 

table#student tr td:first-child { display: none; }

Пожалуйста, помогите мне с псевдоклассом или любым другим трюком, чтобы скрыть третий и четвертый столбец. 

<table id="student">
    <tr>
        <td>Role</td>
        <td>Merin</td>
        <td>Nakarmi</td>
        <td>30</td>
    <tr>
        <td>Role</td>
        <td>Tchelen</td>
        <td>Lilian</td>
        <td>22</td>
    </tr>
    <tr>
        <td>Role</td>
        <td>Suraj</td>
        <td>Shrestha</td>
        <td>31</td>
    </tr>
</table>
5 6
html css html-table pseudo-class hide

5 ответов:

CSS3: 

table#student td {
   display: none;
}
table#student td:nth-child(2) {
   display: block;
}

Используйте селектор nth-child, чтобы снять скрытие 2-го <td> каждой строки, эффективно показывая 2-й столбец.

16

Можно использовать CSS3 :nth-child() селектор 

td:nth-child(3), td:nth-child(4) {
  display: none
}

Jsfiddle здесь

14

Я удивлен, что никто не упомянул об общем селекторе братьев и сестер. (Подробнее здесь) Если вам нужно только показать второй столбец, я бы применил стиль display: none; к первой ячейке и ко всем ячейкам после Второй.

table#student td:first-child,
table#student td:nth-child(2) ~ td {
  display: none;
}
<table id="student">
    <tr>
        <td>Role</td>
        <td>Merin</td>
        <td>Nakarmi</td>
        <td>30</td>
    <tr>
        <td>Role</td>
        <td>Tchelen</td>
        <td>Lilian</td>
        <td>22</td>
    </tr>
    <tr>
        <td>Role</td>
        <td>Suraj</td>
        <td>Shrestha</td>
        <td>31</td>
    </tr>
</table>

Если вам по какой-то причине нужно поддерживать IE7 и IE8, вы можете заменить селектор :nth-child() на соседний селектор родственных элементов: 

table#student td:first-child,
table#student td + td ~ td {
  display: none;
}
2

Вот, пожалуйста.

CSS: 

table#student tr td:first-child, table#student tr td:nth-child(3), table#student tr td:nth-child(4)  { display: none; }

РАБОЧАЯ ДЕМОНСТРАЦИЯ

0

.hideFullColumn tr > .hidecol
{
    display:none;
}

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

Псевдокласс хорош, но если у вас 50 столбцов и вам нужно скрыть 20, то вам придется повторить "td:nth-child(1),td:nth-child(2),....- 20 раз, помня об индексе. Но в этом случае вы можете добавить свое .hidecol класс по созданию th, так что вам не нужно пересматривать индекс.

Вы можете попробовать это и, пожалуйста, дайте мне знать, если это сработает.
-2