将工具提示添加到具有固定 header 和左列的 table
Adding tooltips to a table with fixed header and left columns
我正在尝试将工具提示添加到具有固定 headers 和左列的可滚动 table。当我添加工具提示时,当滚动 table 时,单元格不再隐藏在固定的 headers 和列后面。
<HTML>
<HEAD>
<STYLE>
.gradebooktable {
overflow: auto;
height: 100px;
width: 400px
}
table {
table-layout: fixed;
border-width: 0;
border-spacing: 0;
}
td {
padding: 3px;
white-space: nowrap;
border-right: 1px solid #ccc;
}
th {
background: #999;
}
th.pinned {
position: relative;
z-index: 20;
background: #ccc;
}
td.pinned {
background: #eee;
}
.tooltip{
position:relative;
}
.tooltipcomment{
display:none;
position:absolute;
z-index:10;
border:1px;
background-color:white;
border-style:solid;
border-width:1px;
border-color:blue;
padding:3px;
color:red;
top:20px;
left:20px;
}
.tooltip:hover span.tooltipcomment{
display:block;
}
</style>
</STYLE>
</HEAD>
<BODY>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<SCRIPT>
$( function() {
$('#gradebooktable').scroll( function() {
var translate = "translate(0," + this.scrollTop + "px)";
$("table thead th:not(.pinned)").css('transform', translate);
translate = "translate(" + this.scrollLeft + "px,0)";
$("table tbody .pinned").css('transform', translate);
translate = "translate(" + this.scrollLeft + "px," + this.scrollTop + "px)";
$("table thead th.pinned").css('transform', translate);
}
);
});
</SCRIPT>
<div id="gradebooktable" class="gradebooktable">
<table>
<thead>
<tr>
<th class="pinned">Col 0</th>
<th class="pinned">Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
<th>Col 6</th>
<th>Col 7</th>
<th>Col 8</th>
<th>Col 9</th>
</tr>
</thead>
<tbody>
<tr>
<td class="pinned">First Cell</td>
<td class="pinned">Second Cell</td>
<td class="tooltip">Another Cell
<span class="tooltipcomment">Here is a comment</span></td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
</tr>
<tr>
<td class="pinned">First Cell</td>
<td class="pinned">Second Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
</tr>
<tr>
<td class="pinned">First Cell</td>
<td class="pinned">Second Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
</tr>
<tr>
<td class="pinned">First Cell</td>
<td class="pinned">Second Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
</tr>
<tr>
<td class="pinned">First Cell</td>
<td class="pinned">Second Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
</tr>
<tr>
<td class="pinned">First Cell</td>
<td class="pinned">Second Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
</tr>
<tr>
<td class="pinned">First Cell</td>
<td class="pinned">Second Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
</tr>
</tbody>
</table>
</div>
</BODY>
</HTML>
这里有一个 fiddle 显示问题:
https://jsfiddle.net/6jh60sgs/9/
我需要做什么才能使带有工具提示的单元格滚动到固定 headers 和列的后面?
试试这个,我之前已经测试过你的代码并且可以工作
只需更改工具提示 class
像这样
.tooltip{
position:relative;
display: none;
}
我修好了:https://jsfiddle.net/k42myms3/1/
.gradebooktable {
overflow: auto;
height: 200px;
width: 400px
}
table {
table-layout: fixed;
border-width: 0;
border-spacing: 0;
}
td {
position:relative;
padding: 3px;
white-space: nowrap;
border-right: 1px solid #ccc;
}
th {
position:relative;
z-index:20;
background: #999;
}
th.pinned {
position: relative;
z-index: 40;
background: #ccc;
}
td.pinned {
position: relative;
z-index: 30;
background: #eee;
}
.tooltip{
position:relative;
}
.tooltiptext{
display:none;
position:absolute;
z-index:10;
border:1px;
background-color:#eee;
border-style:solid;
border-width:1px;
border-color:blue;
border-radius: 6px;
padding:3px;
color:blue;
top:20px;
left:20px;
}
.tooltip:hover span.tooltiptext{
display:block;
}
我正在尝试将工具提示添加到具有固定 headers 和左列的可滚动 table。当我添加工具提示时,当滚动 table 时,单元格不再隐藏在固定的 headers 和列后面。
<HTML>
<HEAD>
<STYLE>
.gradebooktable {
overflow: auto;
height: 100px;
width: 400px
}
table {
table-layout: fixed;
border-width: 0;
border-spacing: 0;
}
td {
padding: 3px;
white-space: nowrap;
border-right: 1px solid #ccc;
}
th {
background: #999;
}
th.pinned {
position: relative;
z-index: 20;
background: #ccc;
}
td.pinned {
background: #eee;
}
.tooltip{
position:relative;
}
.tooltipcomment{
display:none;
position:absolute;
z-index:10;
border:1px;
background-color:white;
border-style:solid;
border-width:1px;
border-color:blue;
padding:3px;
color:red;
top:20px;
left:20px;
}
.tooltip:hover span.tooltipcomment{
display:block;
}
</style>
</STYLE>
</HEAD>
<BODY>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<SCRIPT>
$( function() {
$('#gradebooktable').scroll( function() {
var translate = "translate(0," + this.scrollTop + "px)";
$("table thead th:not(.pinned)").css('transform', translate);
translate = "translate(" + this.scrollLeft + "px,0)";
$("table tbody .pinned").css('transform', translate);
translate = "translate(" + this.scrollLeft + "px," + this.scrollTop + "px)";
$("table thead th.pinned").css('transform', translate);
}
);
});
</SCRIPT>
<div id="gradebooktable" class="gradebooktable">
<table>
<thead>
<tr>
<th class="pinned">Col 0</th>
<th class="pinned">Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
<th>Col 6</th>
<th>Col 7</th>
<th>Col 8</th>
<th>Col 9</th>
</tr>
</thead>
<tbody>
<tr>
<td class="pinned">First Cell</td>
<td class="pinned">Second Cell</td>
<td class="tooltip">Another Cell
<span class="tooltipcomment">Here is a comment</span></td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
</tr>
<tr>
<td class="pinned">First Cell</td>
<td class="pinned">Second Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
</tr>
<tr>
<td class="pinned">First Cell</td>
<td class="pinned">Second Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
</tr>
<tr>
<td class="pinned">First Cell</td>
<td class="pinned">Second Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
</tr>
<tr>
<td class="pinned">First Cell</td>
<td class="pinned">Second Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
</tr>
<tr>
<td class="pinned">First Cell</td>
<td class="pinned">Second Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
</tr>
<tr>
<td class="pinned">First Cell</td>
<td class="pinned">Second Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
<td>Another Cell</td>
</tr>
</tbody>
</table>
</div>
</BODY>
</HTML>
这里有一个 fiddle 显示问题:
https://jsfiddle.net/6jh60sgs/9/
我需要做什么才能使带有工具提示的单元格滚动到固定 headers 和列的后面?
试试这个,我之前已经测试过你的代码并且可以工作
只需更改工具提示 class
像这样
.tooltip{
position:relative;
display: none;
}
我修好了:https://jsfiddle.net/k42myms3/1/
.gradebooktable {
overflow: auto;
height: 200px;
width: 400px
}
table {
table-layout: fixed;
border-width: 0;
border-spacing: 0;
}
td {
position:relative;
padding: 3px;
white-space: nowrap;
border-right: 1px solid #ccc;
}
th {
position:relative;
z-index:20;
background: #999;
}
th.pinned {
position: relative;
z-index: 40;
background: #ccc;
}
td.pinned {
position: relative;
z-index: 30;
background: #eee;
}
.tooltip{
position:relative;
}
.tooltiptext{
display:none;
position:absolute;
z-index:10;
border:1px;
background-color:#eee;
border-style:solid;
border-width:1px;
border-color:blue;
border-radius: 6px;
padding:3px;
color:blue;
top:20px;
left:20px;
}
.tooltip:hover span.tooltiptext{
display:block;
}