html - 水平滚动并使用多边形或 SVG 时，如何首先保持边框半径和粘性位置？
问题描述
我有一个过去被问到堆栈溢出的问题，但我正在尝试一种稍微不同的方法来解决它。
我将表格的第一行设置为粘性的，我还使用边框半径 css 属性使左上角和左下角变圆。
问题是当我水平滚动时，下方会破坏边框半径效果。（见图）
我用 td 尝试了以下两种可能的解决方案：之前，第一种使用多边形，另一种使用 svg。为了更清晰，我使用了红色，但可以随意将其更改为白色。
<div class="container my-5" style="max-width:500px;">
<h1>Polygon Example</h1>
<div id="polygon" class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First</th>
<th>Last</th>
<th>Handle</th>
<th>First</th>
<th>Last</th>
<th>Handle</th>
<th>First</th>
<th>Last</th>
<th>Handle</th>
<th>First</th>
<th>Last</th>
<th>Handle</th>
<th>First</th>
<th>Last</th>
<th>Handle</th>
<th>First</th>
<th>Last</th>
<th>Handle</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mark</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Mark</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Mark</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
</tbody>
</table>
</div>
<h1>SVG Example</h1>
<div id="svg" class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First</th>
<th>Last</th>
<th>Handle</th>
<th>First</th>
<th>Last</th>
<th>Handle</th>
<th>First</th>
<th>Last</th>
<th>Handle</th>
<th>First</th>
<th>Last</th>
<th>Handle</th>
<th>First</th>
<th>Last</th>
<th>Handle</th>
<th>First</th>
<th>Last</th>
<th>Handle</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mark</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Mark</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Mark</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
</tbody>
</table>
</div>
</div>
<style>
table {
border-collapse: separate !important;
border-spacing: 0 1em !important;
}
.table > :not(caption) > * > * {border-top-width: 1px;}
thead th:first-of-type {
position: -webkit-sticky;
position: sticky;
top: 0 !important;
left: 0 !important;
z-index: 15;
text-align: center;
min-width:300px;
background-color: green !important;
color: #eee !important;
border-bottom-left-radius: 0.25rem !important;
border-top-left-radius: 0.25rem !important;
}
tbody td:first-of-type {
position: -webkit-sticky;
position: sticky;
top: 0 !important;
left: 0 !important;
z-index: 15;
text-align: center;
min-width:300px;
background-color: green !important;
color: #eee !important;
border-bottom-left-radius: 0.25rem !important;
border-top-left-radius: 0.25rem !important;
}
/** Test solution **/
#polygon table tbody td:first-child::before {
width: 1rem;
height: 1rem;
content: '';
display: block;
position: absolute;
background-color:red;
clip-path: polygon(100% 0, 100% 50%, 60% 50%, 55% 50%, 45% 46%, 55% 50%, 50% 60%, 50% 100%, 0 100%, 0 0);
top: -.563rem;
left: -.5rem;
z-index:10;
}
#svg table tbody td:first-child::before {
width: 1rem;
height: 1rem;
transform: rotate(.75turn);
content: url('data:image/svg+xml;utf8,<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="spinner-third" class="svg-inline--fa fa-spinner-third fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="red" d="M456.433 371.72l-27.79-16.045c-7.192-4.152-10.052-13.136-6.487-20.636 25.82-54.328 23.566-118.602-6.768-171.03-30.265-52.529-84.802-86.621-144.76-91.424C262.35 71.922 256 64.953 256 56.649V24.56c0-9.31 7.916-16.609 17.204-15.96 81.795 5.717 156.412 51.902 197.611 123.408 41.301 71.385 43.99 159.096 8.042 232.792-4.082 8.369-14.361 11.575-22.424 6.92z"></path></svg>');
display: block;
position: absolute;
top: -.18rem;
left: -.35rem;
z-index:10;
}
</style>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>我的问题是：我应该使用 SVG 还是多边形？如何正确选择和计算每个元素？
解决方案
推荐阅读
- mysql - 计算生成超过 2 张发票的客户 - mysql
- javascript - 在 WordPress 上发送电子邮件并取消订阅
- excel - 使用 INDEX 和 MATCH VBA 向左查找值反向 Vlookup
- r - 在 R 中解析从 mongoDB 导出的 JSON
- freeradius - 转发自由半径
- java - 在超类中声明的枚举在子类中不可访问
- netsuite - 如何在 Suitelet 的列表 (serverWidget.List) 中添加复选框
- angular - Angular6 Schema 表单动态选择
- reactjs - 在父组件的状态更改时重新渲染子组件
- performance - 为什么 Cassandra 从磁盘读取的数据比需要的多得多？