如何将边框半径应用于具有水平滚动的分隔表行?
时间：2023-09-05
本文介绍了如何将边框半径应用于具有水平滚动的分隔表行?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！
问题描述
我有一个包含大量数据的表格，所以它必须水平滚动.我已经设计了将每一行分隔为每张单独卡片的表格，但我无法正确获得表格行左右部分的边框半径.如果我滚动到右侧的尽头，那么我可以看到右侧的半径和左侧的半径相同.当您在中间时，您看不到任何边界半径.
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">
layer.open打开的页面关闭时，父页面刷新的方法layer.open打开的页面关闭时，父页面刷新的方法，在layer.open中添加： end: function(){ window.parent.location.reload();//关闭open打开的页面时，刷新父页面 }