Переключать столбцы таблицы с помощью <colgroup>

0

Просто обнаружил <colgroup>. Попытка использовать это для переключения столбцов. Работает для таких вещей, как цвет фона, но не скрывается.

http://www.w3schools.com/tags/tag_colgroup.asp

table-column - тоже свойство отображения, поэтому я думал, да, здорово!

http://www.w3schools.com/cssref/pr_class_display.asp

Однако, похоже, это не так просто. Темы и обсуждения, как правило, погружаются в расширенный jQuery. Почему это?

Моя таблица выглядит так:

<table style="vertical-align: middle;">
  <colgroup>
    <col id="c1">
    <col id="c2">
    <col id="c3">
    <col id="c4">
    <col id="c5">
  </colgroup>
      <tr id="d1">
        <td style="text-align: right; vertical-align: middle;">1/2 D note:</td>

и т.п.

С помощью кнопки переключения:

<a href="javascript:toggleCol2();"><img src="/ico/ms.gif" class="ico" alt="X" title="toggle milli-seconds" id="col_ms">milli-seconds</a>

И этот JavaScript:

var Col2 = 1;

function toggleCol2() {
    if (Col2 == 0) {
        window.document.getElementById('c2').style.display = "table-column";
        window.document.getElementById('col_ms').style.opacity = "1";
        Col2 = 1;
    } else if (Col2 == 1) {
        window.document.getElementById('c2').style.display = "none";
        window.document.getElementById('col_ms').style.opacity = "0.2";
        Col2 = 0;
    }
}

из этого файла: http://flamencopeko.net/bpm_calc.js

Это тестовая страница: http://flamencopeko.net/bpm_calc_col.php

  • 1
    col раздражающе ограничительный. quirksmode.org/css/css2/columns.html См. раздел ограничений.
  • 0
    Ну, это похоже. Ну, по крайней мере, тогда я не должен чувствовать себя слишком глупо. Благодарю.
Теги:
colgroup

1 ответ

1
Лучший ответ

Используйте значение коллапса для свойства видимости тега col, который вам нужен. Например, для скрытия колонки c2 используйте:

#c2 {
   visibility: collapse;
}

А также, чтобы обнулить ширину свернутого столбца, установите ширину элемента col равным 0 при установке свойства table table-layout css в фиксированное значение:

#c2 {
   visibility: collapse;
   width:0;
}

а также

<table style="table-layout:fixed;...">
...
Поделиться
  • 0
    Да. Я сделал это. Это работает. Ширина стола не поддерживалась. Также IE центрировал полученную меньшую таблицу, в то время как другие браузеры держали ее выровненной по левому краю. Когда дело дошло до переключения рядов, у меня не было вопроса, что я преследую. Теперь, когда столбец переключается, мне нужно немного подумать о том, как я хочу, чтобы это работало / выглядело. Но я хочу функциональность. Ценю весь вклад, сейчас, а также в будущем. Я думаю, я хочу, чтобы ячейки изменили ширину, чтобы заполнить таблицу. Я вернусь к этому. Благодарю.
  • 1
    Пожалуйста. Вы также можете установить свойство width элементов col в процентах.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню