Можно ли скрыть / показать столбцы таблицы, изменив класс CSS только для элемента col?

Question

Я пытаюсь скрыть / показать столбцы в таблице на основе выбора пользователя во время выполнения.Я определил два CSS-класса:

.hide { visibility: collapse; }

.show { visibility: visible; }

Я попытался установить эти стили для элемента <col>, соответствующего столбцу, который я хочу скрыть / показать:

<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      ...
    </tr>
  </thead>
  <colgroup>
    <col class="hide">
    <col>
    ...
  </colgroup>
  <tbody>
    <tr>
      <td>Row 1 Column 1</td>
      <td>Row 1 Column 2</td>
    </tr>
    ...
  </tbody>
</table>

Однако, этокажется, работает только в Firefox, но не в Safari или Chrome.Safari и Chrome требуют специальной обработки?Я стараюсь избегать циклического прохождения по всем строкам и изменять класс / стиль CSS для каждого соответствующего <td>, а количество столбцов в таблице велико, поэтому я хотел бы также избежать создания одного класса CSS на столбец.Есть ли надежный способ скрыть / показать столбцы в браузерах, просто изменив класс CSS на <col>?

Answer 1

Браузеры на основе Webkit, похоже, еще не поддерживают col {visibility: collapse}. http://www.quirksmode.org/css/columns.html очень полезно для проверки поддержки столбцов таблицы.

Я сейчас играю с:

/* Skipping 1st column: labels */
table.hidecol2 th:nth-child(2),
table.hidecol2 td:nth-child(2),
table.hidecol3 th:nth-child(3),
table.hidecol3 td:nth-child(3) {
  display: none;
}

но тогда я могу позволить себе не заботиться о IE. Просто остерегайтесь того, что вам придется настроить любые colspans и rowspans. Используйте tr: first-child, tr: not (: first-child) и т. Д. И т. Д., Чтобы выбрать / избежать при необходимости.

Answer 2

Я думаю, что лучший выбор - использовать colgroup в вашей таблице и изменить атрибуты css, чтобы показать или скрыть столбец или набор столбцов.Например, вы бы скрыли первые пять столбцов, как показано ниже:

   <table>
        <colgroup>
            <col id="filterTableColgroup" span="5">
        </colgroup>
        <thead>
        <tr>
            <th>...</th>
        </tr> ...

И измените атрибут с помощью JQuery, как показано ниже:

    $("#filterTableColgroup").css('visibility', 'collapse');

Answer 3

Ну, на самом деле Chrome не является широко поддерживаемым браузером, так что технически никого не волнует, не работает ли он в Chrome (пока нет). Но почему бы не установить видимость скрытой?

td {
     width:100px;
     height:500px;
     border:solid 1px #000000;
 }
td#one {
      visibility:hidden;
     background:#ff0000;
 }
td#two {
     visibility:hidden;
     background:#00ff00;
 }
td#three {
      visibility:hidden;
     background:#0000ff;
 }