CSS获取当前<td>的<th>？

Question

我正在努力强调目前正在徘徊<th>的<td>那个.

我可以突出第一个<tr>使用:

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

有没有办法做到这一点<th>？

注意 - 我正在使用范围<th>,像这样<th scope="col">,我可以使用它吗？

注2 - 或者,有没有办法获得当前列？

Answer 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看到一个例子.

Answer 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;
}