时间戳

首页 > 解决方案 > 位置：滚动条上方的绝对内容

html - 位置：滚动条上方的绝对内容

问题描述

我有以下问题：我有一张桌子，在这张桌子上我有一堆单元格。一些单元格有工具提示。

如果用户将鼠标悬停在给定的单元格上，则会出现工具提示。不同的是，这个表格的底部有一个滚动条，从左到右。这是因为内容太大而无法放入屏幕。

如果我有一个 position : absolute 的工具提示没有相对父级，它会显示滚动条上方的内容（可读），但不跟随滚动条。

如果我有 position: absolute 具有相对父级的工具提示，它会跟随滚动条，但隐藏内容。

    <!DOCTYPE html>
    <head>
    	<style>
    	thead > tr > td {
    		background-color: grey;
    		width: 150px;
    		height: 30px;
    	}
    	
    	table{
    		table-layout: fixed;
    	}
    	
    	.tooltipWrapper{
    		position:relative;
    	}
    	
    	.tooltip{
    		position: absolute;
    		display:none;
    		top: 10px;
    		background-color: green;
    	}
    	
    	.tooltipWrapper:hover .tooltip{
    		display:block;
    	}
    	
    	.contentWrapper{
    		overflow-x: scroll;
    		overflow-y: hidden;
    	}
    	</style>
    </head>
    <body>
    <div class="contentWrapper">
    	<table border="0" cellspacing="0" cellpadding="0" width="100%">
    		<thead>
    			<tr>
    				<td>Column 1</td>
    				<td>Column 2</td>
    				<td>Column 3</td>
    				<td>Column 4</td>
    				<td>Column 5</td>
    				<td>Column 6</td>
    				<td>Column 7</td>
    				<td>Column 8</td>
    				<td>Column 9</td>
    				<td>Column 10</td>
    				<td>Column 11</td>
    				<td>Column 12</td>
    				<td>Column 13</td>
    				<td>Column 14</td>
    				<td>Column 15</td>
    				<td>Column 16</td>
    				<td>Column 17</td>
    				<td>Column 18</td>
    			</tr>
    		</thead>
    		<tbody>
    			<tr>
    				<td>Content 1-1</td>
    				<td>Content 1-2</td>
    				<td>Content 1-3</td>
    				<td>Content 1-4</td>
    				<td>Content 1-5</td>
    				<td>Content 1-6</td>
    				<td>Content 1-7</td>
    				<td>Content 1-8</td>
    				<td>Content 1-9</td>
    				<td>Content 1-10</td>
    				<td>Content 1-11</td>
    				<td>Content 1-12</td>
    				<td>Content 1-13</td>
    				<td>Content 1-14</td>
    				<td>Content 1-15</td>
    				<td>Content 1-16</td>
    				<td>Content 1-17</td>
    				<td>Content 1-18</td>
    			</tr>
    			<tr>
    				<td>Content 2-1</td>
    				<td>Content 2-2</td>
    				<td>
    					<div class="tooltipWrapper">
    						<div>Hover me!</div>
    						<div class="tooltip">Cool tips here!<br>Indeed, very cool tips<br>I do enjoy these tips</div>
    					</div>
    				</td>
    				<td>Content 2-4</td>
    				<td>Content 2-5</td>
    				<td>Content 2-6</td>
    				<td>Content 2-7</td>
    				<td>Content 2-8</td>
    				<td>Content 2-9</td>
    				<td>Content 2-10</td>
    				<td>Content 2-11</td>
    				<td>Content 2-12</td>
    				<td>Content 2-13</td>
    				<td>Content 2-14</td>
    				<td>Content 2-15</td>
    				<td>Content 2-16</td>
    				<td>Content 2-17</td>
    				<td>Content 2-18</td>
    			</tr>
    			
    		</tbody>
    	</table>
    </div>
    </body>

我的预期结果是，如果您将鼠标悬停在“悬停我”文本上，并且向右滚动了一点，它将跟随它，并将其显示在滚动条上方。

谢谢！

标签： htmlcss

解决方案

一种解决方案将 margin-bottom 添加到表格中

thead > tr > td {
    		background-color: grey;
    		width: 150px;
    		height: 30px;
    	}
    	
    	table{
    		table-layout: fixed;
        margin-bottom:70px;
    	}
    	
    	.tooltipWrapper{
    		position:relative;
    	}
    	
    	.tooltip{
    		position: absolute;
    		display: none;
    		background-color: green;
    	}
    	
    	.tooltipWrapper:hover .tooltip{
    		display:block;
    	}
    	
    	.contentWrapper{
    		overflow-x: scroll;
    		overflow-y: hidden;
    	}
<div class="contentWrapper">
    	<table border="0" cellspacing="0" cellpadding="0" width="100%">
    		<thead>
    			<tr>
    				<td>Column 1</td>
    				<td>Column 2</td>
    				<td>Column 3</td>
    				<td>Column 4</td>
    				<td>Column 5</td>
    				<td>Column 6</td>
    				<td>Column 7</td>
    				<td>Column 8</td>
    				<td>Column 9</td>
    				<td>Column 10</td>
    				<td>Column 11</td>
    				<td>Column 12</td>
    				<td>Column 13</td>
    				<td>Column 14</td>
    				<td>Column 15</td>
    				<td>Column 16</td>
    				<td>Column 17</td>
    				<td>Column 18</td>
    			</tr>
    		</thead>
    		<tbody>
    			<tr>
    				<td>Content 1-1</td>
    				<td>Content 1-2</td>
    				<td>Content 1-3</td>
    				<td>Content 1-4</td>
    				<td>Content 1-5</td>
    				<td>Content 1-6</td>
    				<td>Content 1-7</td>
    				<td>Content 1-8</td>
    				<td>Content 1-9</td>
    				<td>Content 1-10</td>
    				<td>Content 1-11</td>
    				<td>Content 1-12</td>
    				<td>Content 1-13</td>
    				<td>Content 1-14</td>
    				<td>Content 1-15</td>
    				<td>Content 1-16</td>
    				<td>Content 1-17</td>
    				<td>Content 1-18</td>
    			</tr>
    			<tr>
    				<td>Content 2-1</td>
    				<td>Content 2-2</td>
    				<td>
    					<div class="tooltipWrapper">
    						<div>Hover me!</div>
    						<div class="tooltip">Cool tips here!<br>Indeed, very cool tips<br>I do enjoy these tips</div>
    					</div>
    				</td>
    				<td>Content 2-4</td>
    				<td>Content 2-5</td>
    				<td>Content 2-6</td>
    				<td>Content 2-7</td>
    				<td>Content 2-8</td>
    				<td>Content 2-9</td>
    				<td>Content 2-10</td>
    				<td>Content 2-11</td>
    				<td>Content 2-12</td>
    				<td>Content 2-13</td>
    				<td>Content 2-14</td>
    				<td>Content 2-15</td>
    				<td>Content 2-16</td>
    				<td>Content 2-17</td>
    				<td>Content 2-18</td>
    			</tr>
    			
    		</tbody>
    	</table>
    </div>

推荐阅读