border-collapse、border-radius应用于表格table时的问题

最新推荐文章于 2023-03-29 15:45:00 发布
最新推荐文章于 2023-03-29 15:45:00 发布
阅读量1k 收藏 6
点赞数 1
分类专栏： css 文章标签： border-collapse border-radius table 兼容
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linziping/article/details/95589061
版权

前几天做项目要给表格添加圆角，发现table应用border-radius不起作用，后来查资料了解到表格的border-collapse属性值为collapse时与border-radius有冲突，导致border-radius不起作用；

解决方案：
1、把表格的border-collapse属性值设为separate；
2、使用div标签包裹table标签，给div应用边框border、圆角border-radius；

linziping
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS设置table表格圆角边框
weixin_49821165的博客
07-19 5225
有些情况下需要给表格设置圆角，但是border-radius与border-collapse:collapse;会产生冲突，给table设置border-radius并不会生效。 可以通过减少单元格框线的方式来不设置boder-collapse;collapse; 这样就能给表格添加圆角了。 效果如图 源码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8">
CSS表格样式：圆角，隔行，变色的具体实现
12-13
先看效果图：  CSS： 复制代码代码如下: <style type=”text/css”> table { max-width: 100%; background-color: transparent; border-collapse: collapse; border-spacing: 0; } .table { width: 100%; margin-bottom: 18px; } .table th, .table td { padding: 8px; line-height: 18px; text-align: left; vertical-align: top; border-t
table表格实现边框圆角无效的解决方法
DJCBPL的专栏
09-02 1275
table表格实现边框圆角无效的解决方法HTML代码样式文件 HTML代码 效果图如下 table表格实现边框圆角无效的解决方法， <table class="table table-bordered"> <thead> <tr> <td class="col-5">成本清单</td> <td class="col-2">FIL</td>
解决table边框圆角无效
热门推荐
lu900618的专栏
11-13 1万+
将 border-collapse 设置为 separate css 样式 给 border border-radius
CSS3的border-radius属性和border-collapse：collapse不能混合使用。 如何使用边框半径创建带有圆角的折叠表格？
CHCH998的博客
07-14 1240
Edit - Original Title: Is there an alternative way to achieve border-collapse:collapse in CSS (in o
CSS学习笔记2
weixin_63010951的博客
07-27 629
css基础，盒子模型 浮动 定位
CSS3的border-radius属性和border-collapse：collapse不能混合使用如何使用边框半径创建带有圆角的折叠表格？...
dituirenwu的博客
02-26 376
头歌教学实践平台 Web前端开发基础 CSS-表格样式
最新发布
01-20
- `border-collapse`: 控制是否合并表格边框，值可为`collapse`（合并）或`separate`（不合并）。 - `border-spacing`: 设置单元格之间的边距。 - `width/height`: 设置表格的宽度和高度。 - `background-color`...
CSS样式Table[6] - style-table
11-25
我们可以为这些元素单独设置样式，例如`table {border-collapse: collapse;}`将合并所有相邻边框，使得表格看起来更整洁。 2. **边框样式**: `border`属性可以设置边框的宽度、样式和颜色。例如，`td {border: 1px ...
CSS样式Table[3] - practical-css3-tables-with-rounded-corners-demo
11-24
要创建一个带有圆角的表格，首先需要将表格的边框样式设置为实线，然后为`<table>`元素设置合适的`border-radius`值。同时，确保`border-collapse`属性设为`separate`，以使边框在单元格之间分离，从而显示圆角效果...
CSS样式Table[2] - CSS3Tables
11-29
- `table-layout`属性控制表格的布局算法。`fixed`值可使表格宽度固定，所有列宽会根据第一行的列宽自动调整；而`auto`则是默认值，列宽根据内容自适应。 2. **边框合并** - `border-collapse`属性决定表格单元格...
border-collapse: collapse 和 border-radius同时使用border-radius不起作用
qq_25152555的博客
06-27 2427
这两个公用不起作用这是css本身存在的问题。解决办法：给table外层再包一层div,给div上设置border-radius和border。
解决CSS border-radius属性和 table边框border-collapse: collapse不能一起使用问题(☆▽☆)
weixin_72616433的博客
03-29 465
解决CSS border-radius属性和 table边框border-collapse: collapse不能一起使用问题(☆▽☆)
table表格设置圆角
业余前端的职业经历
06-14 4026
表格设置圆角
CSS基础知识（八）：盒子模型——border、padding、margin、content
前端
11-02 1862
文章目录前言一、盒子模型二、border1.border2.border-style2.边框简写3.border-collapse4. border-radius5.box-shadow6.text-shadow二、padding三、margin四、盒模型1.标准盒模型2.怪异盒模型 前言 一、盒子模型 二、border 1.border border可以设置元素的边框。边框有三部分组成:边框宽度(粗细) 边框样式 边框颜色 border : border-width || border-style
关于table边框，设置了border-collapse:collapse之后，各条边框是怎么合并的？
qq_39941521的博客
09-22 3506
关于table边框，设置了border-collapse:collapse之后，各条边框是怎么合并的？ 遇到一个边框需要设置圆角的，然后发现在设置了border-collapse:collapse之后，border-radius:5px就不起作用了，就各种查证，发现这个是css本身就存在的，两者不能混在一起使用。所以使用了其他的方式，实现了table的圆角。 但是现在就很想知道，tab
html中table四角圆弧,table设置圆角的两种方式
weixin_42357618的博客
06-11 7366
默认代码table {width: 100%;background-color: yellowgreen;text-align: center;}表头1表头2表头3123456复制代码原因如果我们直接对table设置border-radius是不会生效的， 因为table的默认属性border-collapse值为collapse。border-collapse:collapse和border-r...
border-collapse:collapse boder-radius 不起作用
06-03
`border-collapse: collapse` 是用来合并表格边框的属性，它会将相邻单元格的边框合并为一条边框，因此 `border-radius` 不会起作用。如果想要为表格单元格设置圆角，可以将 `border-collapse` 属性设置为 `separate...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值