我不确定在没有 JavaScript 的情况下这是否有可能实现，但它会更可取。
这是我的页面的样子:
____________________________
| TITLE | |This is a fixed header. I want "TITLE"
|----------------------------| |to be the name of the row, and I want it
| _______ _______ ___| |to show when I hover over one of the
| | | | | | | |image rows.
| | | | | | | |
| |_______| |_______| |___| | [The boxes are the images.]
| _______ _______ ___| |
|__|_______|__|_______|__|___| |
header {
background: #FFFFFF;
position: fixed !important;
width: 100%;
height: 85px;
top: 0;
left: 0;
text-align: left;
font-size: 30px;
border: 1px solid black;
}
body {
padding-top: 100px;
/*equal to the height of your header */
}
r1n {
width: 200px;
height: 200px;
display: inline;
}
r1n:hover {
display: none
}
table tr:hover ~ header r1n {
display: none
}<header>
<r1n>TITLE_NAME</r1n>
</header>
<body>
<table>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
</table>
</body>是否有 CSS 方法/技巧使固定标题显示行的名称？ 也许通过在标题中隐藏一堆 div 并根据光标所在的行显示它们？
编辑:
@AndrewBone:CSS 和 JS 解决方案
@Dekel:JS解决方案
编辑^2:只是...只是看看所有的答案。他们都很好。 CSS/JS/JQ.
最佳答案
我看到很多人说这是不可能的，尽管我绝不会建议您在实践中使用它。
这是一个例子:
body {
margin: 0;
}
table {
margin: 18px 0 0 0;
position: relative;
border: 1px solid black;
}
tr:nth-child(even) {
background: #DDD;
}
tr:nth-child(odd) {
background: #FFF;
}
tr:hover {
background: tomato;
}
tr[data-header]:hover:after {
content: attr(data-header);
position: absolute;
top: -19px;
left: -1px;
border: 1px solid black;
border-bottom-width: 0px;
width: 100%;
}
td {
padding: 5px 15px;
}<table>
<tr data-header="Header 1">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr data-header="Header 2">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr data-header="Header 3">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr data-header="Header 4">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
</table>我为每个 tr 添加了一个 header 属性我还添加了一个伪元素，这个伪元素放置了一些 content，在这个例子中它是从 header 属性中获取的 attr(header)，并将它定位在我们希望它相对于父级 table 的位置，就像我们有一些有效的代码并且是免费的 JS 一样。但老实说，如果可以的话，请使用 JS :-)
希望这对您有所帮助。
编辑:
这是一个纯javascript的解决方案
const trSel = document.querySelectorAll("tr[data-header]");
for (let i = 0; i < trSel.length; i++) {
trSel[i].addEventListener("mouseover", function(evt) {
let headSel = trSel[i].parentElement.parentElement.parentElement.querySelector(":scope > .header");
headSel.innerHTML = trSel[i].dataset.header;
});
}body {
margin: 0;
}
.header {
padding: 5px 0;
}
tr:nth-child(even) {
background: #DDD;
}
tr:nth-child(odd) {
background: #FFF;
}
tr[data-header]:hover {
background: tomato;
}
td {
padding: 5px 15px;
}<div>
<div class="header">
Placeholder!
</div>
<table>
<tr data-header="Table 1 Row 1">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr data-header="Table 1 Row 2">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr data-header="Table 1 Row 3">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr data-header="Table 1 Row 4">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
</table>
</div>
<h2>
Wild second table appeared
</h2>
<div>
<div class="header">
Placeholder!
</div>
<table>
<tr data-header="Table 2 Row 1">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr data-header="Table 2 Row 2">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr data-header="Table 2 Row 3">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr data-header="Table 2 Row 4">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
</table>
</div>它使用相同的原理，但现在它实际上是在更新文本，因此当您将鼠标移开时，它可以保留最后选择的行。它也适用于多个表。
编辑 2: 稍作修改，我已更改为使用数据 header 而不是 header ，只是因为这就是您要做的 ;-)
关于javascript - 悬停在表格中以影响标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40000277/