CSS, чтобы получить <th> текущего <td>?

Ответ 1

Вот решение для JavaScript. Я знаю, что вы действительно хотите, чтобы CSS только отвечал на это, но поскольку это невозможно, я старался как можно больше в CSS:

Сначала ваш стол должен иметь colgroups. Один для каждого столбца.

<table class="coltest">
    <colgroup><col/><col/></colgroup>
    <thead><td>Left</td><td>Right</td></thead>    
    <tbody>
        <tr><td>1</td><td>2</td></tr>
        <tr><td>3</td><td>4</td></tr>
    </tbody>
</table>

Я также провозгласил некоторый простой CSS для прикрепления к нашему col при зависании:

.colhover {
  background-color: yellow;
}

И, наконец, jQuery загорается при наведении:

$("table.coltest td").hover(function() {
    // get the colgroup at this elements specific index (col1, col2, etc)
    $("col").eq($(this).index()).addClass('colhover');
}, function() {
    $("col").eq($(this).index()).removeClass('colhover');
});

Это событие срабатывает, когда мышь наводится на td, делая весь colgroup, что td является частью желтого.

Здесь вы можете увидеть пример jsfiddle.

Ответ 2

Как отмечали другие, в настоящее время это невозможно с помощью только CSS. Но, как упражнение по кодированию, я попробовал вращать таблицу с помощью css-преобразований, а затем "невращаю" ячейки, поэтому ваш первый ребенок заканчивается заголовком столбца...

.container {
  float: left;
  -webkit-transform: rotate(90deg) translate(-240px, -260px);
  -moz-transform: rotate(90deg) translate(-240px, -260px);
  -o-transform: rotate(90deg) translate(-240px, -260px);
  -ms-transform: rotate(90deg) translate(-240px, -260px);
  transform: rotate(90deg) translate(-240px, -260px);
  color: #333;
}

table td, table th {
  border: solid #eee 1px;
  padding: 10px;
}

table tr:hover th:first-child { color:#000; background:#EAEAEA; }
table tr:hover td { color:#000;}

table th {
  font-weight: bold;
}

table th, table td {
  height: 200px;
  width: 20px;
}

table th span, table td span {
    display: block;
    position: absolute;
    -webkit-transform: rotate(-90deg) translate(-100px, 0);
    -webkit-transform-origin: top left;
    -moz-transform: rotate(-90deg) translate(-100px, 0);
    -moz-transform-origin: top left;
    -o-transform: rotate(-90deg) translate(-100px, 0);
    -o-transform-origin: top left;
    -ms-transform: rotate(-90deg) translate(-100px, 0);
    -ms-transform-origin: top left;
    transform: rotate(-90deg) translate(-100px, 0);
    transform-origin: top left;
}

посмотреть демо в jsfiddle

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

В теории это должно быть более надежным с writing-mode, но в настоящее время он поддерживается только IE9+. Это выглядело бы как...

table {
  writing-mode: TB-LR;
}

table td, table th {
  writing-mode: LR-TB;
}

Ответ 3

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

http://css-tricks.com/row-and-column-highlighting/

Ответ 4

Иуда прав, что это невозможно с помощью CSS. Причина в том, что вы хотите настроить таргетинг на дочерний элемент родительского родного брата, и в настоящее время нет способа настроить таргетинг на родителей с помощью селекторов CSS.

Здесь решение с использованием jQuery, похожее на пример Jivings, за исключением того, что оно использует ваши теги <th> (вместо colgroups) и выделяет только <th> вместо всего столбца. Второй бит JS выводит, какой столбец вы наводите.

http://jsfiddle.net/tracyfu/Xhs4N/

Ответ 5

Невозможно подойти к дереву с помощью CSS, только горизонтально и вертикально вниз. Здесь у вас есть все селекторы, которые вы можете использовать: http://www.w3.org/TR/css3-selectors/. Ничто не поднимается по дереву... Надеюсь, что источник достаточно правдоподобен;).

К сожалению, js - ваше единственное решение.

Ответ 6

Как было сказано выше, нет способа "выбрать" родителей в CSS.

Спецификация CSS4 предоставляет функцию для определения темы селектора (который позволяет вам сопоставлять родителя). Но даже с этой новой функцией ваш спрос все еще слишком сложный, и единственный способ его достижения - использовать JavaScript.

Подробнее об этом здесь:

Есть ли родительский селектор CSS?