html - 溢出的意外行为
问题描述
代码很多，但是问题的关键很简单。当 table 的容器有`overflow-x: visible; 溢出-y：可见；`，我的弹出框工作正常。但是当表的容器有`overflow-x: auto; 溢出-y：可见；`，容器裁剪我的弹出框。我认为当我有溢出-y 可见时，容器不应该裁剪我的 Y-accis 内容。但确实如此。而且我不知道为什么以及该怎么做。
这里有小示范
.Popover {
display: inline-block;
position: relative;
cursor: help;
}
.Popover__children * {
cursor: help;
}
.Popover__actually {
position: absolute;
background-color: #fff;
padding: 16px;
border-radius: 2px;
color: #333;
max-width: 260px;
width: max-content;
font-size: 13px;
word-break: break-all;
white-space: pre-wrap;
box-shadow: 0 2px 30px rgb(0 0 0 / 20%);
}
.Popover__actually::after {
content: '';
position: absolute;
}
.Popover__actually--above {
bottom: calc(100% + 12px);
left: 50%;
transform: translateX(-50%);
}
.Popover__actually--above::after {
top: 100%;
left: 50%;
transform: translateX(-50%);
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-top: 12px solid #fff;
}
.Popover__actually--below {
top: calc(100% + 10px);
left: 50%;
transform: translateX(-50%);
}
.Popover__actually--below::after {
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 12px solid #fff;
}
.Popover__actually--left {
top: 50%;
transform: translateY(-50%);
right: calc(100% + 12px);
}
.Popover__actually--left::after {
top: 50%;
left: 100%;
transform: translateY(-50%);
border-top: 12px solid transparent;
border-left: 12px solid #fff;
border-bottom: 12px solid transparent;
}
.Popover__actually--right {
top: 50%;
transform: translateY(-50%);
left: calc(100% + 12px);
}
.Popover__actually--right::after {
top: 50%;
right: 100%;
transform: translateY(-50%);
border-top: 12px solid transparent;
border-right: 12px solid #fff;
border-bottom: 12px solid transparent;
}
.Popover__title {
font-size: 12px;
font-weight: 500;
margin: 0 0 15px;
text-transform: uppercase;
}
.Popover__body {
color: #5E5E5E;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My awesome document</title>
</head>
<body>
<h2>Table with overflow-x: auto and overflow-y: visible;</h2>
<div class="row">
<div class="col-xs-12 col-md-12">
<div class="card-body card-padding">
<div class="table-responsive" style="overflow-x: auto;overflow-y: visible;">
<table id="data-table-basic" class="table table-condensed dataTable" role="grid">
<thead>
<tr role="row" class="not-selected">
<th class="cursor-pointer custom_sorting " style="padding-left: 0px; width: 7%;">Domain<span class="sorting_arrows"></span></th>
<th class="cursor-pointer custom_sorting " style="width: 7%;">Complaince<span class="sorting_arrows"></span></th>
<th class="cursor-pointer custom_sorting " style="width: 4%;">SPF Complaince<span class="sorting_arrows"></span></th>
<th class="cursor-pointer custom_sorting " style="width: 4%;">DKIM Complaince<span class="sorting_arrows"></span></th>
<th class="cursor-pointer custom_sorting " style="width: 7%;">Authorized<span class="sorting_arrows"></span></th>
<th class="cursor-pointer custom_sorting " style="width: 4%;">DMARC<span class="sorting_arrows"></span></th>
<th class="cursor-pointer custom_sorting " style="width: 4%;">SPF<span class="sorting_arrows"></span></th>
<th class="cursor-pointer custom_sorting " style="width: 10%;">Volume<span class="sorting_arrows"></span></th>
</tr>
</thead>
<tbody style="overflow: visible;">
<tr>
<td style="padding-left: 0px;">
<div style="display: flex;">
<span class="m-t-5">ipsum.lorem</span>
</div>
</td>
<td>
<div class="p-l-10"><span class="c-green">100%</span></div>
</td>
<td>
<div class="p-l-10"><span class="c-green">99.95%</span></div>
</td>
<td>
<div class="p-l-10"><span class="c-orange">68.38%</span></div>
</td>
<td>
<div class="p-l-10"><label class="label text-capitalize bgm-green-new"><i class="zmdi zmdi-check"></i></label></div>
</td>
<td>
<div class="p-l-10">
<div class="Popover "><span class="Popover__children"><label class="label text-capitalize bgm-green-new">OK</label></span></div>
</div>
</td>
<td>
<div class="p-l-10">
<div class="Popover "><span class="Popover__children"><label class="label text-capitalize bgm-green-new">OK</label></span></div>
</div>
</td>
<td>
<div class="p-l-10">15754</div>
</td>
</tr>
<tr>
<td style="padding-left: 0px;">
<div style="display: flex;">
<span class="m-t-5">lorem.ipsum</span>
</div>
</td>
<td>
<div class="p-l-10"><span class="c-orange">38.71%</span></div>
</td>
<td>
<div class="p-l-10"><span class="c-orange">38.25%</span></div>
</td>
<td>
<div class="p-l-10"><span class="c-orange">39.89%</span></div>
</td>
<td>
<div class="p-l-10"><label class="label text-capitalize bgm-green-new"><i class="zmdi zmdi-check"></i></label></div>
</td>
<td>
<div class="p-l-10">
<div class="Popover "><span class="Popover__children"><label class="label text-capitalize bgm-green-new">OK</label></span></div>
</div>
</td>
<td>
<div class="p-l-10">
<div class="Popover ">
<div class="Popover__actually Popover__actually--above appears">
<h6 class="Popover__title">SPF record</h6>
<span class="Popover__body">v=spf1 lorem ipsum sit dolor</span>
</div>
<span class="Popover__children"><label class="label text-capitalize bgm-green-new">OK</label></span>
</div>
</div>
</td>
<td>
<div class="p-l-10">8249</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<hr style="height: 100px; opacity: 0">
<h2>Table with overflow-x: visible and overflow-y: visible;</h2>
<hr style="height: 100px; opacity: 0">
<div class="row">
<div class="col-xs-12 col-md-12">
<div class="card-body card-padding">
<div class="table-responsive" style="overflow-x: visible;overflow-y: visible;">
<table id="data-table-basic" class="table table-condensed dataTable" role="grid">
<thead>
<tr role="row" class="not-selected">
<th class="cursor-pointer custom_sorting " style="padding-left: 0px; width: 7%;">Domain<span class="sorting_arrows"></span></th>
<th class="cursor-pointer custom_sorting " style="width: 7%;">Complaince<span class="sorting_arrows"></span></th>
<th class="cursor-pointer custom_sorting " style="width: 4%;">SPF Complaince<span class="sorting_arrows"></span></th>
<th class="cursor-pointer custom_sorting " style="width: 4%;">DKIM Complaince<span class="sorting_arrows"></span></th>
<th class="cursor-pointer custom_sorting " style="width: 7%;">Authorized<span class="sorting_arrows"></span></th>
<th class="cursor-pointer custom_sorting " style="width: 4%;">DMARC<span class="sorting_arrows"></span></th>
<th class="cursor-pointer custom_sorting " style="width: 4%;">SPF<span class="sorting_arrows"></span></th>
<th class="cursor-pointer custom_sorting " style="width: 10%;">Volume<span class="sorting_arrows"></span></th>
</tr>
</thead>
<tbody style="overflow: visible;">
<tr>
<td style="padding-left: 0px;">
<div style="display: flex;">
<span class="m-t-5">ipsum.lorem</span>
</div>
</td>
<td>
<div class="p-l-10"><span class="c-green">100%</span></div>
</td>
<td>
<div class="p-l-10"><span class="c-green">99.95%</span></div>
</td>
<td>
<div class="p-l-10"><span class="c-orange">68.38%</span></div>
</td>
<td>
<div class="p-l-10"><label class="label text-capitalize bgm-green-new"><i class="zmdi zmdi-check"></i></label></div>
</td>
<td>
<div class="p-l-10">
<div class="Popover "><span class="Popover__children"><label class="label text-capitalize bgm-green-new">OK</label></span></div>
</div>
</td>
<td>
<div class="p-l-10">
<div class="Popover "><span class="Popover__children"><label class="label text-capitalize bgm-green-new">OK</label></span></div>
</div>
</td>
<td>
<div class="p-l-10">15754</div>
</td>
</tr>
<tr>
<td style="padding-left: 0px;">
<div style="display: flex;">
<span class="m-t-5">lorem.ipsum</span>
</div>
</td>
<td>
<div class="p-l-10"><span class="c-orange">38.71%</span></div>
</td>
<td>
<div class="p-l-10"><span class="c-orange">38.25%</span></div>
</td>
<td>
<div class="p-l-10"><span class="c-orange">39.89%</span></div>
</td>
<td>
<div class="p-l-10"><label class="label text-capitalize bgm-green-new"><i class="zmdi zmdi-check"></i></label></div>
</td>
<td>
<div class="p-l-10">
<div class="Popover "><span class="Popover__children"><label class="label text-capitalize bgm-green-new">OK</label></span></div>
</div>
</td>
<td>
<div class="p-l-10">
<div class="Popover ">
<div class="Popover__actually Popover__actually--above appears">
<h6 class="Popover__title">SPF record</h6>
<span class="Popover__body">v=spf1 lorem ipsum sit dolor</span>
</div>
<span class="Popover__children"><label class="label text-capitalize bgm-green-new">OK</label></span>
</div>
</div>
</td>
<td>
<div class="p-l-10">8249</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>谁知道如何解决这个问题？（我需要我的表格在小屏幕上自动滚动，我需要我的弹出框看起来不错）
解决方案
推荐阅读
- azure-sql-database - Azure Web App VNet 与具有专用链接的存储帐户集成
- java - 如何解决“weblogic.application.ModuleException：java.lang.ClassNotFoundException：org.glassfish.jersey.servlet.ServletContainer”错误
- php - 在 CodeIgniter 中使用重音字符
- python-3.x - pygame.colliderect() 在这两种情况下的工作方式是否相同？
- c# - '执行命令定义时发生错误。有关详细信息，请参阅内部异常。
- ios - 系统图像在 iOS 13 上显示，但在 iOS 12 及之前的版本上不显示
- omnet++ - 如何在 OMNet++ 控制台上实时打印碰撞？
- django - 用户登录后，Django登录按钮变为注销
- kubernetes - RocketChat 安卓应用 SSL 连接问题
- python - 如何校准我的分类神经网络的输入形状？