本文介绍了如何将边框半径应用于具有水平滚动的分隔表行?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！
问题描述
我有一个包含大量数据的表格，所以它必须水平滚动.我已经设计了将每一行分隔为每张单独卡片的表格，但我无法正确获得表格行左右部分的边框半径.如果我滚动到右侧的尽头，那么我可以看到右侧的半径和左侧的半径相同.当您在中间时，您看不到任何边界半径.
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；/* 你的半径 *
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！
相关文档推荐
Pause youtube video, youtube api(暂停 youtube 视频，youtube api)
Youtube iframe api not triggering onYouTubeIframeAPIReady(Youtube iframe api 未触发 onYouTubeIframeAPIReady)
How can I stop a video with Javascript in Youtube?(如何在 Youtube 中停止使用 Javascript 的视频?)
Embed YouTube video - Refused to display in a frame because it set #39;X-Frame-Options#39; to #39;SAMEORIGIN#39;(嵌入 YouTube 视频 - 拒绝显示在框架中，因为它将“X-Frame-Options设置为“SAMEORIGIN)
How to call Greasemonkey#39;s GM_ functions from code that must run in the target page scope?(如何从必须在目标页面范围内运行的代码中调用 Greasemonkey 的 GM_ 函数?)
How do you mute an embedded Youtube player?(如何使嵌入式 Youtube 播放器静音?)
-
• 错误 [ERR_REQUIRE_ESM]:不支持 ES ...
-
• 使用选择器在 CSS 中选择元素的前一...
-
• 为什么 Chrome(在 Electron 内部)会...
-
• 跨域读阻塞 (CORB)...
-
• layui怎么刷新当前页面？...
-
• node.js安装依赖包 yarn install inf...
-
• 如何在 JS 中获取 CryptoJS.HmacSHA2...
-
• js报错：Uncaught SyntaxError: Unex...
-
• 类型错误:window.require 不是函数...
-
• Uncaught (in promise) TypeError: F...
-
• 使用 JavaScript 模拟 tab 按键...
-
• 何时使用 L.TileLayer 与 L.tileLaye...
-
• 错误 [ERR_REQUIRE_ESM]:不支持 ES ...
-
• 使用选择器在 CSS 中选择元素的前一...
-
• 为什么 Chrome(在 Electron 内部)会...
-
• 跨域读阻塞 (CORB)...
-
• layui怎么刷新当前页面？...
-
• node.js安装依赖包 yarn install inf...
-
• 如何在 JS 中获取 CryptoJS.HmacSHA2...
-
• js报错：Uncaught SyntaxError: Unex...
-
• 类型错误:window.require 不是函数...
-
• Uncaught (in promise) TypeError: F...
-
• 使用 JavaScript 模拟 tab 按键...
-
• 何时使用 L.TileLayer 与 L.tileLaye...