table表格设置圆角

我们发现直接给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;

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

关注我 持续更新前端知识