如何将边框半径应用于具有水平滚动的分隔表行?-前端问题

How to apply border radius to separated table rows that has horizontal scroll?(如何将边框半径应用于具有水平滚动的分隔表行?)

本文介绍了如何将边框半径应用于具有水平滚动的分隔表行?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个包含大量数据的表格，所以它必须水平滚动.我已经设计了将每一行分隔为每张单独卡片的表格，但我无法正确获得表格行左右部分的边框半径.如果我滚动到右侧的尽头，那么我可以看到右侧的半径和左侧的半径相同.当您在中间时，您看不到任何边界半径.

PS:当有水平滚动时，将半径应用于第一个和最后一个 td 不起作用.:(

有什么技巧可以解决这个问题，让边界半径的两侧始终可见吗?我对桌面没有太多想法，因为它确实需要有限的属性.或者我们可能需要 javascript 来获得所需的输出?

我在下面的图片中看起来是这样的，

.page-wrapper {背景颜色:#f1f2f5；}桌子 {空白:nowrap；边框折叠:分开；边框间距:0 10px；}.桌子 {位置:相对；边框折叠:分开；边框间距:0 10px；}.table td,.table th,.table tr,.table 标题，.table 正文 {边框:无；位置:相对；}.table thead th {边框:无；填充顶部:0；填充底部:0；}身体{位置:相对；}身体TR {边框半径:8px；边距底部:20px；位置:相对；}tbody tr::after {内容: '';宽度:100%；位置:绝对；左:0；右:0；背景颜色:#fff；高度:48px；z-index:0；边框半径:8px；}身体td {z-index:1；}

<html lang="en" class=""><头><meta charset="UTF-8"><title>演示</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css"></头><身体><div class="page-wrapper"><div class="容器 pt-3"><div class="table-responsive">
 解决方案 
这是一个使用 position:sticky 的技巧，它似乎只在 Chrome 上运行良好(使用 firefox 检查).
tbody tr::after,tbody tr::before {内容: '';显示:块；位置:粘性；右:0；/* 一个会粘在右边 */左:0；/* 左边的另一个 */盒子阴影:30px 0 0 6px #f1f2f5;/* 一个盒子阴影来隐藏外部 */高度:48px；左边距:-50px；/* 对于你将使用的半径足够大 */z指数:9；边框半径:0 30px 30px 0；/* 你的半径 *

问题描述

基础教程推荐