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

Question

Я пытаюсь выделить <th> из <td>, который в данный момент колеблется.

Я могу выделить первый <tr>, используя:

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

Есть ли способ сделать это для <th>?

Примечание - Я использую области для <th>, например, <th scope="col">, могу ли я использовать это?

Примечание 2 - Или есть способ получить текущий столбец?

Answer 1

Как уже отмечали другие, в настоящее время это невозможно только с помощью 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;
}

Answer 2

Вот решение 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 здесь .

Answer 3

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

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

Answer 4

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

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

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

Answer 5

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

* ** 1003 тысяча два *http://css -tricks.com / строки и столбцы-подсветка /

Answer 6

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

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

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

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