当前位置:网站首页>table表格设置圆角

table表格设置圆角

2022-07-06 17:29:00 yunchong_zhao

我们发现直接给table设置 border-radius 的时候发现不生效

已经好久没有原生写过table 布局了 现在基本上都是使用 ui框架中的table

但是吧有的时候我们 移动端需要表格的时候 同时展示一些 复杂的表头 合并表格的时候 这个时候可能需要我们原生书写 table 标签

比如 rowspan 合并行。colspan 合并列
好像有点跑题了。设置圆角的话 我们不能在表格上设置

border-collapse: collapse; 如果你设置了这个。可能不生效的
合并(collapsed )模式下,表格中相邻单元格共享边框。在这种模式下,CSS 属性border-style 的值 inset 表现为槽,值 outset 表现为脊。

border-collapse: collapse;

border-collapse CSS 属性是用来决定表格的边框是分开的还是合并的。在分隔模式下,相邻的单元格都拥有独立的边框。在合并模式下,相邻单元格共享边框。

如果想设置成功的话还得调整 下面这样就可以
设置border-collapse: separate;
分隔(separated)模式是 HTML 表格的传统模式。相邻单元格都拥有不同的边框。边框之间的距离是通过 CSS 属性 border-spacing 来确定的。

border-collapse: separate;
border-spacing: 0;
border-radius: 4rpx;

然后就可以了。
写移动端表格 这次狠狠的给我复习了一波。表格知识。

关注我 持续更新前端知识

原网站

版权声明
本文为[yunchong_zhao]所创,转载请带上原文链接,感谢
https://blog.csdn.net/yunchong_zhao/article/details/125274559