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;

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

关注我持续更新前端知识

table表格设置圆角相关推荐

html表格怎么改圆角边框,Table元素设置圆角border
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? Table元素设置圆角border-radius 首先,我们先对border-collapse属性进行简单的了解. 有以 ...
在PHP中给表格加上css样式,表格CSS样式设置给table表格设置CSS样式表
表格table tr td CSS花色设置给table表格设置CSS花式表在一个网页中多处运用了表格table标签,这个时候给指定的表格对象设置装备摆设款式仿照照旧概略经由CSS发展管束配置. 着 ...
layui table 表格设置透明
layui table 表格设置透明通过css来控制,直接上代码通过css来控制,直接上代码首先需要将table标签放入div中,div增加class名称 transparentDataTabl ...
Element Table 表格设置滚动条以及修改边框颜色
本文中使用element UI表格,需求是给表格设置滚动条.查找了一些方法,包括查找插件解决效果都达不到要求.特此写下此文,便于日后使用和学习交流. 一.需要实现的效果图二.直接上代码 app是是挂 ...
html table表格设置滚动条
table对tbody进行设置使其能够进行滚动. 示例一: 效果如下: 代码如下: <!DOCTYPE HTML> <html> <head><meta ht ...
element table 表格设置max-height 没有出现滚动条，多渲染了一列。
个人理解: 设置max-height后会多渲染一列,这一列应该是用来承载滚动条的,但是因为某种原因,滚动条没有被渲染出来,就出现了多渲染了一列,这一列里面没用任何东西. 设置后效果图: 样式代码: / ...
设置element ui table表格线条颜色以及设置圆角/解决element ui table设置圆角后线条不显示或显示模糊问题，亲测有效
问题描述 table表格设置为圆角后并且设置table border颜色,设置圆角后导致修改颜色后的border无法显示问题解决 /* 设置圆角以及边框颜色 */.el-table{border-r ...
css怎么设置table表格的边框为单线边框？（代码详解）
table表格边框怎么设置为单线边框?本篇文章就给大家介绍一种css设置table表格的边框为单线边框的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 首先我们来看看给tabl ...
css单线边框_css怎么设置table表格的边框为单线边框？（代码详解）
table表格边框怎么设置为单线边框?本篇文章就给大家介绍一种css设置table表格的边框为单线边框的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 首先我们来看看给tabl ...

table表格设置圆角

table表格设置圆角相关推荐

最新文章

热门文章