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

Question

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>

557 5

html css html-table pseudo-class hide

5 ответов:

Comments

Ничего не найдено.

AlienHoboken · Accepted Answer · 2015-11-15 15:51:47

CSS3:
table#student td {
   display: none;
}
table#student td:nth-child(2) {
   display: block;
}
Используйте селектор nth-child, чтобы снять скрытие 2-го <td> каждой строки, эффективно показывая 2-й столбец.

Aurélien Gasser · Accepted Answer · 2013-11-20 10:43:29

Можно использовать CSS3 :nth-child() селектор
td:nth-child(3), td:nth-child(4) {
  display: none
}
Jsfiddle здесь

stealththeninja · Accepted Answer · 2015-12-05 00:09:40

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

Nitesh · Accepted Answer · 2013-11-20 10:38:39

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

CSS:
table#student tr td:first-child, table#student tr td:nth-child(3), table#student tr td:nth-child(4)  { display: none; }
РАБОЧАЯ ДЕМОНСТРАЦИЯ

souvik sett · Accepted Answer · 2015-05-08 12:18:15

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

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