关于table边框，设置了border-collapse:collapse之后，各条边框是怎么合并的？

最新推荐文章于 2024-05-30 17:06:51 发布
最新推荐文章于 2024-05-30 17:06:51 发布
阅读量3.5k 收藏 1
点赞数

关于table边框，设置了border-collapse:collapse之后，各条边框是怎么合并的？

遇到一个边框需要设置圆角的，然后发现在设置了border-collapse:collapse之后，border-radius:5px就不起作用了，就各种查证，发现这个是css本身就存在的，两者不能混在一起使用。所以使用了其他的方式，实现了table的圆角。
但是现在就很想知道，table的border和td、th的border是怎么合并成一条边框的？
类似于table左上角跟第一个th交界的地方，两者边框合并之后，保留的是table的边框，还是th的边框呢？如果说保留的是th的边框，那么我对第一个th的左上角设置border-radius为什么依然没有效果呢？
关注者
76
被浏览
4962
2 个回答
张磊
孜孜不倦，锲而不舍

泻药-v-，正好上周五组内分享的时候说到border-collapse的优先级，w3c关于table的那一节，确实有指示border-collapse: collapse的冲突处理。

直接贴链接：Tables

文档里面有详细的两个例子，很直观。

这里我在总结一下：（前提border-collapse: collapse)
1. border-style = [hidden|none]
hidden的优先级是最高的，当两个边框产生聚合时，只要任意一个设置了hidden，则最终结果是不显示任何边框；none的优先级是最低的，只要任意一个设置none，就直接以另一个为结果。
正常情况下border-style: hidden 和 border-style: none 都是不显示边框，当当border-collapse: collapse的时候就有区别了。
2. border-width不一致的情况下，以border-width大的为主
3. border-style≠[hidden|none] 并且 border-width一致的情况下，以这个优先顺序：'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove', 'inset'.
4. 当边框仅仅是color不一样的时候：就按照dom层级结构来了，子element的border样式优于父element的border样式。[cell > row > rowgroup > table]；如果层级结构是兄弟关系，以表格是ltr为例，左边、上边优先。
但是呢，特别有意思的是规范没有指明边角处corner的collapse逻辑，，so在chrome和firefox下表现不一样。。
可以在chrome和firefox下分别打开： BQEMea
下图是兄弟td仅仅是color不一致，然后左边是chrome，右边是firefox

另外对于border-radius无效，见文档： CSS Backgrounds and Borders Module Level 3
谢然
在小米和阿里做过前端，也在省重点高中教过书，现在办前端培训是因为热爱教育。
《CSS权威指南》第三版360页：
qq_39941521
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS系列之表格边框 border-collapse
老__L的博客
01-25 8128
本文主要介绍CSS的border-collapse属性。表格边框 border-collapse
HTML画表格table边线重合问题（border-collapse: collapse；）
黄彪博客
12-03 7820
文章目录一、参考问题描述解决思路一、使用DIV + CSS二、使用table border-collapse案例 一、参考 CSS border-collapse 属性 问题描述 工作中，需要画一个表格，需要显示border,于是使用DIV+CSS的方式，如果设置“border: 1px solid red”的样式，结果div重合的地方就会出现2倍的边线，与设计不符 解决思路 一、使用DIV + CSS 如果一定要使用DIV+CSS, 则需要区分第一行 、 最后一行 、第一列、最后一列 、中间表格的
html中table 的边框合并 cellspacing
最新发布
qq_33650655的博客
05-30 348
【代码】html中table 的边框合并 cellspacing。
CSS基础-05-表格（表格边框、 折叠边框 border-collapse、水平对齐 text-align、垂直对齐 vertical-align 、表格填充 padding）
运维玄德公
04-07 4502
1. 边框（border） 1.1 添加边框 示例（table 边框） 示例（th边框） 示例（td 边框） 1.2 折叠边框（border-collapse） 2. 高度和宽度（width/height） 示例（表头高度设置为百分比） 3. 对齐 3.1 水平对齐（text-align） 3.2 垂直对齐（vertical-align） 4. 表格填充（padding）...
深入table之collapse
Jone_wan的专栏
03-22 2361
table嵌套table深入剖析border-collapse： （最下面的一行为嵌套的table） collapse: 分析：tr的宽度不等于table的宽度，而是table-trboder/2,因此tr下再嵌table，不能保证与上面的table宽度一致，所以无论怎么设置都是无法对齐的。 separate: 分析：tr长度与table一样长，因此tr嵌table的宽度也能保证与table的长度一致。 border-collapse的...
border-collapse:collapse; 表示折叠边框
weixin_30905981的博客
05-17 1万+
名称：border-collapse分类：表格简述：设置行和单元格的边是否合并概述：border-collapse是设置表格的行<tr>或<td>之间是否留有距离的样式，<tr>与<td>之间的距离，在表格里可以通过border="xxx"与 cellspacing="xxx"来实现。换句话说，当border-collapse设置为collapse时...
一个属性border-collapse解决Table的边框问题
09-25
表格的边框算是页面制作中最头痛的，带边线的表格在之前非常讨厌做，不过今天终于解决了这个问题，下面将示例与大家分享下
table中的border-collapse属性
04-14
border属性 border-collapse属性
gridview生成时如何去掉style属性中的border-collapse
09-04
在默认情况下，GridView在生成HTML代码时，会添加`border-collapse: collapse`到其`<table>`元素的`style`属性中，这会导致表格的边框合并，使得表格看起来更加紧凑。然而，有时我们可能希望自定义表格的样式，或者...
LEDP-Table-Practice--1:LEDP表练习2
05-10
在LEDP表练习2中，你可能会接触到更复杂的一些特性，比如表格的边框设置、合并单元格（使用`colspan`和`rowspan`属性）、表头固定（对于长表格来说，表头在滚动时保持可见）以及表格的样式控制（使用CSS）。...
html表格边框设置单线,border-collapse把table边框的样式设置成单线
weixin_39622980的博客
06-15 5203
table 默认的情况，如果给单元格，添加边框的时候。每个边框都会有自己的边框。这样看上去就出现了，类似的双边框情况。看上去一点也不美观，还是把边框设置成单线的时候，比较美观。table中有个border-collapse属性，就是用来合并边框的。防止出现“双边框的情况。collapse的本意就有折叠的含义，首先给出一个示例的效果。没有把边框设置成单线的效果border-collapse 没有合...
table的border-collapse属性
Mr.Ren的专栏
08-11 1344
table的css样式
Table表单之border边框操作
热门推荐
LaoYe的博客
09-18 2万+
border样式在平时我们使用的频率是非常高的，但是除了表单table之外，我们几乎都是一对一的使用，一般不会遇到什么问题。 而在table中众多的数据排列在一起，为了将各个数据隔开，我们就不得不使用boder进行操作。由于表格相对其他元素的特殊性，我们在对表单进行表格操作时，往往会遇到一些特殊的情况。 这不最近我在做后台管理时就经常需要和table打...
前端css基础知识（4）
常胜将军的博客
12-22 438
１ 盒子模型 作用：页面布局。 １.1 Border   border-style              solid    实线           dotted   点线           Dashed  虚线 １.2 连写   Border: 1px  solid  #006600;  Border-left | right | bottom | top １.3 b
8、HTML ＜table＞标签（表格）
you can you up up up的博客
10-29 778
在 HTML 中，我们使用 <table> 标签来定义表格。HTML 中的表格和 Excel 中的表格是类似的，都包括行、列、单元格、表头等元素。但是 HTML 表格在功能方面远没有 Excel 表格强大，HTML 表格不支持排序、求和、方差等数学计算，它一般用来展示数据。 在学习表格之前，我们不妨先来看一段简单的 HTML 代码： <body> <table border="1"> <tr> <th>名称</th>
css两个边框横合并,CSS属性 table 的 border-collapse 边框合并
weixin_39759441的博客
08-03 3496
说明该CSS属性用来设定表格的行和列的边框是合并成单边框，还是分别有各自的边框separate 缺省值。边框分开，不合并。collapse 边框合并。即如果相邻，则共用同一个边框。虽然在DIV+CSS 时代 table 的权重越来越低，但是有时候，还是局部地方table 还是挺好用的特别是制表方面，还是table 比较的方便。当然，制表肯定少不了边框，但是如果你直接在td上加边框，就会出现一种情况...
table中border-collapse的问题
10-23 2320
在table中，如果设置了border-collapse: collapse;，边框会合并，这时你修改top或bottom的颜色，会有问题 解决办法是：border-collapse: separate;border-spacing: 0; 这样就可以设置边框的颜色了 转载于:https://www.cnblogs.com/zhaobao1830/p/9834046.html...
border-collapse:collapse 这个小妖精！
IME的博客
07-16 6451
第一次写博客，还有点小激动。个人最近一直做前端项目，对前端的热爱，与日俱增。各种学习停不下来，同时在项目中应用各种技能打怪。其乐无穷啊！感觉有好多东西必须和大家分享分享。于是就有想写的冲动。第一个被我选中的就是被我用了N遍的border-collapse:collapse;下面正经起来 。    相信第一次遇到这个小妖精。你会看到这样的解释：如果可能，边框会合并为一个单一的边框。what？请
table { display: table; border-collapse: separate; box-sizing: border-box; text-indent: initial; border-spacing: 2px; border-color: gray; }
07-12
默认情况下，相邻单元格的边框会合并为一条边框线，使用分离模式可以让相邻单元格的边框独立显示。 - `box-sizing: border-box;`：指定元素的盒模型为 border-box 模式，这意味着元素的宽度和高度包括内容区、内边距...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值