当前位置:网站首页>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;
然后就可以了。
写移动端表格 这次狠狠的给我复习了一波。表格知识。
关注我 持续更新前端知识
边栏推荐
- Pytorch中torch和torchvision的安装
- Openjudge noi 1.7 08: character substitution
- BFS realizes breadth first traversal of adjacency matrix (with examples)
- Dell Notebook Periodic Flash Screen Fault
- [hfctf2020]babyupload session parsing engine
- 线段树(SegmentTree)
- [HFCTF2020]BabyUpload session解析引擎
- pytorch之数据类型tensor
- Cause of handler memory leak
- 动态规划思想《从入门到放弃》
猜你喜欢
Niuke cold training camp 6B (Freund has no green name level)
[牛客] B-完全平方数
pytorch之数据类型tensor
Part 7: STM32 serial communication programming
界面控件DevExpress WinForms皮肤编辑器的这个补丁,你了解了吗?
迈动互联中标北京人寿保险,助推客户提升品牌价值
Dell Notebook Periodic Flash Screen Fault
[Niuke] b-complete square
Explain in detail the matrix normalization function normalize() of OpenCV [norm or value range of the scoped matrix (normalization)], and attach norm_ Example code in the case of minmax
boot - prometheus-push gateway 使用
随机推荐
Informatics Olympiad YBT 1171: factors of large integers | 1.6 13: factors of large integers
golang中的Mutex原理解析
【案例分享】网络环路检测基本功能配置
重上吹麻滩——段芝堂创始人翟立冬游记
一行代码实现地址信息解析
Supersocket 1.6 creates a simple socket server with message length in the header
第四篇,STM32中断控制编程
Case development of landlord fighting game
Force buckle 1037 Effective boomerang
What kind of experience is it to realize real-time collaboration in jupyter
pyflink的安装和测试
Dell笔记本周期性闪屏故障
JTAG principle of arm bare board debugging
Dell Notebook Periodic Flash Screen Fault
In rails, when the resource creation operation fails and render: new is called, why must the URL be changed to the index URL of the resource?
C Primer Plus Chapter 14 (structure and other data forms)
Part 7: STM32 serial communication programming
Learning notes 5: ram and ROM
ESP Arduino (IV) PWM waveform control output
Openjudge noi 1.7 08: character substitution