我不确定在没有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。
答案 0 :(得分：3)
我看到很多人说这是不可能的，虽然我绝不会建议你在实践中使用它。
以下是一个例子：
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，在这个例子中，由于attr(header)而取自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：轻微编辑，我已更改为使用数据标头而不是标头，只是因为这是您的意图; - ）
答案 1 :(得分：1)
只是因为你在评论@ AndrewBone的答案中要求提供js解决方案。
请注意使用index查找表格中悬停的tr的当前位置。索引从0开始，因此你看到的是+1。
$(function() {
$('#tbl1 tr').hover(function() {
i = $('#tbl1 tr').index(this) + 1;
$('r1n').text('Row ' + i);
});
});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;
}
#tbl1 {
border-collapse: collapse;
}
#tbl1 td {
padding: 5px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<r1n>TITLE_NAME</r1n>
</header>
<table id="tbl1" border="1">
<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>
答案 2 :(得分：1)
我看到你有一些答案（和一个被接受的答案）只是想把JQ解决方案与目标放在这里，如果有人喜欢这样的东西:)（我想我不会伤害另一个答案）
在此代码中，table和header是兄弟，即使在您发布的代码中，body是表的父级，也是带有标头的兄弟。在这里，所有内容都会自动插入默认的<body>标记
$("table tr").hover(function(){
var data = $(this).attr('data-target'),
target = $(this).parents('table').siblings('header').find('h1')
$(target).each(function(){
if($(this).attr('id') == data) {
$(this).toggle()
}
})
})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 */
}
header h1 {
display:none;
position:absolute;
left:0;
top:0;
margin:0;
}
table tr {
cursor:pointer;
background:blue;
}
table tr:nth-child(odd) {
background:red;
}
table,td {
border-collapse:collapse;
padding:20px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<h1 id="row1">Title row1 </h1>
<h1 id="row2">Title row2 </h1>
<h1 id="row3">Title row3 </h1>
<h1 id="row4">Title row4 </h1>
</header>
<body>
<table>
<tr data-target="row1">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr data-target="row2">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr data-target="row3">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr data-target="row4">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
</table>
</body>