html - 可滚动表格内的 CSS 绝对定位
问题描述
好的，所以我有一个表，其中有 x 行，可以依赖于该表中有多少数据，该表旨在在行超过视图高度时滚动。
悬停在表格中的菜单单元格时，图标下方会出现一个小的下拉菜单，但它需要浮动在其他所有内容上，而不是简单地将其余内容“向下推”。
我已经在下拉菜单上设置了绝对定位，这似乎有效，直到我开始滚动表格，然后如果没有滚动条，菜单似乎相对于页面上行的原始位置定位。
.tableDropMenuContainerContent {
min-height: auto;
min-width: 150px;
position: absolute;
background-color: white;
display: none;
}
无论如何设置它，以便菜单的行为类似于表中整行的前几行？
$(document).ready(function() {
$('.extMenuCell').hover(function() {
$(this).css('background-color', '#e1d9ff');
$(this).children('.tableDropMenuContainerContent').css('display', 'block');
});
$('.extMenuCell').mouseleave(function() {
$(this).css('background-color', '#eaf3ff');
$(this).children('.tableDropMenuContainerContent').css('display', 'none');
});
});.testTable {
width: 400px;
height: 200px;
overflow: scroll;
}
.panel {
background: #fff;
-webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, .12), 0 2px 2px 0 rgba(0, 0, 0, .24);
box-shadow: 0 0 2px 0 rgba(0, 0, 0, .12), 0 2px 2px 0 rgba(0, 0, 0, .24);
border-radius: 3px;
border: none;
margin-bottom: 20px;
}
table {
border-collapse: collapse;
width: 100%;
margin-bottom: 1rem;
border-radius: 2px;
}
table thead th {
padding: 30px;
}
table thead th {
padding: 15px 5px;
font-weight: 500;
text-align: left;
}
tfoot td,
tfoot th,
thead td,
thead th {
padding: .5rem .625rem .625rem;
font-weight: 700;
text-align: left;
}
.extMenuCell,
.extMenuCellHdr {
width: 5%;
padding: 0;
}
.extMenuCell,
.extMenuCellHdr {
width: 5%;
padding: 0px;
}
.extMenuIcon {
z-index: 1;
position: absolute;
}
.tableDropMenuCell {
background-color: rgb(234, 243, 255);
cursor: pointer;
}
.tableDropMenuContainer {}
.tableDropMenuContainerContent {
min-height: auto;
min-width: 150px;
/* float: left; */
position: absolute;
background-color: white;
display: none;
}
.tableDropMenuContainerContent a {
display: block;
font-size: 14pt;
text-align: center;
border: 1px solid black;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="testTable">
<table class="panel unstriped">
<thead>
<tr>
<th class="extMenuCellHdr"></th>
<th class="main-action"></th>
</tr>
</thead>
<tbody class="scrollable-table">
<tr>
<td class="tableDropMenuCell extMenuCell">
<a href="#" class="tableDropMenuContainer">
<svg width="35" height="35">
<rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
<div class="tableDropMenuContainerContent">
<a href="">Option A</a>
<a href="">Option B</a>
</div>
</a>
</td>
</tr>
<tr>
<td class="tableDropMenuCell extMenuCell">
<a href="#" class="tableDropMenuContainer">
<svg width="35" height="35">
<rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
<div class="tableDropMenuContainerContent">
<a href="">Option A</a>
<a href="">Option B</a>
</div>
</a>
</td>
</tr>
<tr>
<td class="tableDropMenuCell extMenuCell">
<a href="#" class="tableDropMenuContainer">
<svg width="35" height="35">
<rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
<div class="tableDropMenuContainerContent">
<a href="">Option A</a>
<a href="">Option B</a>
</div>
</a>
</td>
</tr>
<tr>
<td class="tableDropMenuCell extMenuCell">
<a href="#" class="tableDropMenuContainer">
<svg width="35" height="35">
<rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
<div class="tableDropMenuContainerContent">
<a href="">Option A</a>
<a href="">Option B</a>
</div>
</a>
</td>
</tr>
<tr>
<td class="tableDropMenuCell extMenuCell">
<a href="#" class="tableDropMenuContainer">
<svg width="35" height="35">
<rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
<div class="tableDropMenuContainerContent">
<a href="">Option A</a>
<a href="">Option B</a>
</div>
</a>
</td>
</tr>
<tr>
<td class="tableDropMenuCell extMenuCell">
<a href="#" class="tableDropMenuContainer">
<svg width="35" height="35">
<rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
<div class="tableDropMenuContainerContent">
<a href="">Option A</a>
<a href="">Option B</a>
</div>
</a>
</td>
</tr>
<tr>
<td class="tableDropMenuCell extMenuCell">
<a href="#" class="tableDropMenuContainer">
<svg width="35" height="35">
<rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
<div class="tableDropMenuContainerContent">
<a href="">Option A</a>
<a href="">Option B</a>
</div>
</a>
</td>
</tr>
<tr>
<td class="tableDropMenuCell extMenuCell">
<a href="#" class="tableDropMenuContainer">
<svg width="35" height="35">
<rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
<div class="tableDropMenuContainerContent">
<a href="">Option A</a>
<a href="">Option B</a>
</div>
</a>
</td>
</tr>
<tr>
<td class="tableDropMenuCell extMenuCell">
<a href="#" class="tableDropMenuContainer">
<svg width="35" height="35">
<rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
<div class="tableDropMenuContainerContent">
<a href="">Option A</a>
<a href="">Option B</a>
</div>
</a>
</td>
</tr>
<tr>
<td class="tableDropMenuCell extMenuCell">
<a href="#" class="tableDropMenuContainer">
<svg width="35" height="35">
<rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
<div class="tableDropMenuContainerContent">
<a href="">Option A</a>
<a href="">Option B</a>
</div>
</a>
</td>
</tr>
<tr>
<td class="tableDropMenuCell extMenuCell">
<a href="#" class="tableDropMenuContainer">
<svg width="35" height="35">
<rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
<div class="tableDropMenuContainerContent">
<a href="">Option A</a>
<a href="">Option B</a>
</div>
</a>
</td>
</tr>
<tr>
<td class="tableDropMenuCell extMenuCell">
<a href="#" class="tableDropMenuContainer">
<svg width="35" height="35">
<rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
<div class="tableDropMenuContainerContent">
<a href="">Option A</a>
<a href="">Option B</a>
</div>
</a>
</td>
</tr>
<tr>
<td class="tableDropMenuCell extMenuCell">
<a href="#" class="tableDropMenuContainer">
<svg width="35" height="35">
<rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
<div class="tableDropMenuContainerContent">
<a href="">Option A</a>
<a href="">Option B</a>
</div>
</a>
</td>
</tr>
<tr>
<td class="tableDropMenuCell extMenuCell">
<a href="#" class="tableDropMenuContainer">
<svg width="35" height="35">
<rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
<div class="tableDropMenuContainerContent">
<a href="">Option A</a>
<a href="">Option B</a>
</div>
</a>
</td>
</tr>
<tr>
<td class="tableDropMenuCell extMenuCell">
<a href="#" class="tableDropMenuContainer">
<svg width="35" height="35">
<rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
<div class="tableDropMenuContainerContent">
<a href="">Option A</a>
<a href="">Option B</a>
</div>
</a>
</td>
</tr>
<tr>
<td class="tableDropMenuCell extMenuCell">
<a href="#" class="tableDropMenuContainer">
<svg width="35" height="35">
<rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
<div class="tableDropMenuContainerContent">
<a href="">Option A</a>
<a href="">Option B</a>
</div>
</a>
</td>
</tr>
</tbody>
</table>
</div>有人请帮助我了解我哪里出错了。:)
解决方案
添加这个CSS代码..
css
.tableDropMenuCell {
position: relative;
}
.tableDropMenuContainerContent {
z-index: 9;
}
推荐阅读
- reactjs - 如何仅加载每个组件所需的 CSS（React js）
- c++ - 如何在不配置新工具链的情况下告诉 Bazel 使用哪个编译器
- javascript - 单击一键登录后，如何删除第二个身份验证屏幕？
- javascript - 在 useEffect 上设置参数并在 React Navigation 5 中的 createStackNav 上获取参数
- angular - 如何从角材料日期选择器中删除填充
- c++ - 如何在 C++ 中对向量数组进行排序？
- ios - 如何从 MPNowPlayingInfoCenter 访问 ViewController
- excel - 如果两个单元格匹配：从第三个单元格返回以对数据进行排序
- r - 创建一个新变量 - 有没有更好的方法？
- angular - Angular Karma Jasmin - 没有 LocaleService 的提供者