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

Question

У меня есть таблица, похожая на приведенную ниже на сайте 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> 

Answer 1

CSS3:

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

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

Answer 2

Вы можете использовать CSS3 :nth-child() selector

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

jsfiddle here

Answer 3

Здесь вы идете.

CSS-:

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

WORKING DEMO

Answer 4

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

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

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

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

Answer 5

Я удивлен, что никто не упомянул общий селектор. (More info here) Если вам нужно показать только вторую колонку, я бы применил стиль 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; 
}