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 () селектор

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

jsfiddle здесь

Answer 3

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

Answer 4

Ну вот.

CSS:

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

РАБОЧАЯ ДЕМО

Answer 5

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

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

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

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