Arhn - архитектура программирования

Как настроить таргетинг на ‹td›, который попадает под ‹th›, с помощью colspan?

У меня есть динамическая таблица, которая обычно выглядит так

----------------------------------------------------
|       AA        |      BB     |       CC        |
----------------------------------------------------
| X1 |  X2  | X3  |  Y1  |  Y2  |  Z1  | Z2  | Z3 |
----------------------------------------------------
| xx |  xx  | xx  |  yy  |  yy  |  zz  | zz  | zz |
---------------------------------------------------- 
| xx |  xx  | xx  |  yy  |  yy  |  zz  | zz  | zz |
----------------------------------------------------

И я хочу иметь разные цвета для AA, BB, CC и т. д. - вообще чередующийся цвет (полоски зебры). Я не хочу ориентироваться только на ячейку AA, а на все столбцы, которые попадают в ячейку AA. Все <td> под ним.

Я не могу настроить таргетинг на использование :nth-child(odd), потому что он выберет нечетные дочерние столбцы вместо нечетного столбца из <th> элементов и его дочерних элементов.

Обратите внимание, что количество дочерних столбцов не является фиксированным. их может быть один, два, три и более.

Есть ли способ добиться этого?

html css html-table
07.12.2013

  • Не с чистым селектором CSS, потому что он включает семантику, которая просто не отражается с теми, которые у нас есть в настоящее время. См. dev.w3.org/csswg/selectors4/#table-pseudos. где для решения этой проблемы был предложен новый набор селекторов, в частности, комбинатор столбцов. 07.12.2013
  • Если чистый CSS невозможен, я могу использовать JS. 07.12.2013
  • Возможно, связано: stackoverflow.com/questions/18280703/ 07.12.2013
  • @cimmanon colgroup вроде работает. но это похоже на дополнительные накладные расходы, чтобы иметь номер диапазона для атрибута col span. хм 07.12.2013

Ответы:


1

Я вижу два варианта CSS, чтобы иметь что-то плавное.

1) (неуклюжий и хитрый) только для цвета, вы можете повторить box-shadow под th. http://codepen.io/anon/pen/ysLvE

th:nth-child(even) {
  background:yellow;
  box-shadow:
    0 1em  0  yellow,
    0 3em  0  yellow,
 /* and so on as much as needed , here Sass or alike is your friend */
    0 29em 0  yellow
}

здесь версия Sass/scss: http://codepen.io/gc-nomade/pen/xqALu< /а>

2) (немного умнее) вы можете вставить псевдоэлемент с фоновым изображением http://codepen.io/anon/pen/EgCJp

th:after {
  content:'';
  display:block;
  height:3000px;/* what you think long enough */
  margin-bottom:-3000px; /* negative margin to reduce height virtually to zero */
  background:yellow url(http://lorempixel.com/600/800/nature/1) center;
}

Если этот подход не подходит для вашего способа использования CSS, javascript станет вашим спасителем :). ++

07.12.2013
  • Это довольно аккуратно. Мне нравится второй подход. Единственное, что мне нужно учитывать, это высота. Рост не всегда одинаков — может быть супернизким или супервысоким. Но я думаю, должен быть способ сделать высоту всегда равной 100% или что-то в этом роде. Я попробую! 08.12.2013

    • 2

    Можно на чистом css, хотя требует css3 и не очень красиво:

    TABLE > TH > TD:nth-child(1),
TABLE > TR > TD:nth-child(1),
TABLE > TR > TD:nth-child(2),
TABLE > TR > TD:nth-child(3) {
    background-color: red;
}

    Второй, третий столбцы идут по тому же пути.

    Может быть немного лучше, если вы можете дать нужным td-ам общее имя класса (например, «redColumn» и «greenColumn»). В этом случае простой

    .redColumn {
    background-color: red;
}

.greenColumn {
    background-color: green;
}

    будет в порядке.

    07.12.2013
  • Я не думаю, что это сработает, потому что технически td не находится внутри th/tr с точки зрения html-кода. Так что я не думаю, что цель будет правильной. Что касается общего имени класса, на самом деле это невозможно, потому что, как упоминалось в вопросах, количество столбцов не фиксировано. Все создается динамически. 07.12.2013
    • Новые материалы
    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..