border-collapse为tr添加底部border

最新推荐文章于 2021-06-23 00:34:00 发布
原创 最新推荐文章于 2021-06-23 00:34:00 发布 · 3.2k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#border #浏览器 #internet #table #脚本 #html

本文深入解析CSSborder-collapse属性，包括其作用、使用方式、浏览器支持情况及示例代码，同时介绍了如何在不同场景下利用该属性进行边框合并或继承。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

CSS border-collapse 用于表格边框合并

说明

设置或检索表格的行和单元格的边框是合并在一起还是按照标准的HTML样式分开。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 borderCollapse 。

值：separate | collapse | inherit

可用值 值的说明
separate 缺省值。边框分开，不合并。
collapse 边框合并。即如果相邻，则共用同一个边框。
inherit 从父元素继承 border-collapse 属性的值。

浏览器支持
所有主流浏览器都支持 border-collapse 属性。
任何版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

示例代码
<table style="border-collapse:collapse">
JavaScript 语法： object.style.borderCollapse="collapse"

适用于
Table表格元素

 

给table的tr添加border-top时没有效果的解决方法
12-09
然而，在实际操作中，有时你会发现为`<tr>`元素直接添加`border-top`属性并没有预期的效果，这通常是因为浏览器的默认样式与CSS的`border-collapse`属性有关。本文将详细解析这个问题，并提供解决方案。 当我们在...
table中的border-collapse属性
04-14
border-collapse属性是CSS中用于控制表格边框表现的重要属性，它决定了表格单元格（td）之间的边框是否合并为单一的边框。 ### 一、border-collapse属性详解 #### 1. 基本概念 `border-collapse`属性有两个可选值...
表格tr下边框设置方法
睡不够
08-27 2239
表格tr下边框设置方法 使用表格时给tr设置边距如果如下直接使用border-bottom是没有作用的 tr { border-bottom : 1px solid #FFF; } table中有一个属性：border-collapse border-collapse 参数： 1.separate 默认值。边框会被分开。不会忽略border-spacing 和 empty-cells 属性。 2.collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty
兼容IE7的border-collapse
weixin_34014555的博客
01-14 389
2019独角兽企业重金招聘Python工程师标准>>> ...
CSS知识：为什么给表格的tr设置border无效
qq_37898024的博客
03-22 3077
现象 我们可以发现，在使用table的时候，当我们为tr设置边框的时候，并没有什么效果。 原因 表格，当我们写一个完整的表格我们可以发现，单元格与单元格之间是有一定的缝隙的，边框，顾名思义应该是一个完整的线条，但是现在一个完整的tr是由多个td组合在一起得到的，td与td之间并没有完全覆盖，这玩意无法给tr设置边框 解决办法 给table整体添加css样式 table{ border-c...
给表格（table）中行（tr）设置边框（border）
h_jQuery的博客
05-02 4058
给tr设置以下代码无效时： border-bottom: 1px solid #e5e5e5; 在表格中加以下属性就可以解决： table { border-collapse: collapse; }
css3-表格
RedGuy_anluo的博客
01-05 665
使用CSS3设置表格的边框及颜色： 在里 CSS3文件里： th是用来设置内边框的，还有tr,td tb,th{text-align: center; //居中 background-color: cyan;//整个表格的背景颜色 border: 1px solid blue;//边框的宽度和颜色 } 这样的边框是双条的,如果不需要这样的，可以使其折叠：（合并边框）tb{width: 400
一个属性border-collapse解决Table的边框问题
09-25
border-collapse属性的主要作用是控制表格的边框合并行为，当它的值被设置为“collapse”时，表格的边框会合并为单一边框，这样就完美解决了双边框的问题。 通过使用border-collapse属性，网页设计师们不再需要为每...
table中为tr设置border
风雨飘飘飘啊飘的博客
04-15 4689
在web开发过程中，我们有时候需要给tr一整行添加border，需要展示如下图的效果： 但是通过设置tr的border并没有什么作用，比如下面的代码这样。 tr{ border-top:0.01rem solid rgba(102,102,102,0.1); } 因为table中的tr并不是一个单一的边框，这个时候我们需要给table设置border-collapse属性，将一行表格设置成...
CSS-边框底部样式 | border-bottom-style
weixin_33991418的博客
09-13 2609
border-bottom-styleCSS属性设置元素的底部的线条样式border。 /* Keyword values */ border-bottom-style: none; border-bottom-style: hidden; border-bottom-style: dotted; border-bottom-styl...
html调节tr的距离,css tr间距怎么设置？
weixin_39862382的博客
06-05 8305
CSS是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和现实的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。tr之间距离可以通过设置 tr 的外边距(margin)来实现，但是注意必须先把tr的显示属性设置为块体(block)元素：tr {display: block;/*将tr设置为块体元素*/margin: 2px 0;/*设置tr间距为2px*/}...
html中 table 表格标签 tr th td thead tbody 单元格的合并
qq_51277605的博客
02-22 5929
表格的作用： 表格不是用来布局页面的 而是用来显示数据的 表格标签： 定义表格的表格外框<table></table> 行<tr></tr>必须嵌套在<table>标签中 单元格<td></td>必须嵌套在<tr></tr>标签 字母td指表格数据table data即单元格内容 表头单元格标签 一般为位于表格最左边一列 最上边一行的文本内容 表头单元格也是单元格常用于表格第一行突出重要性 和td不同
html给tr加底部边框,给<tr>标签添加边框
weixin_39599317的博客
06-23 773
arcgis打开图层后右下角坐标小数点位数调整打开arcmap,加载图层后,在其右下方会显示鼠标移动的点坐标,但是默认显示的小数点只有三位,如果是经纬度坐标,只有三位的话不够精确,因此想着能否改变其显示的精度,搜了半天,算是搜到了,但是过了一段时 ...MEMS市场介绍惠普第一.德州仪器第二 市场观察发展报告说,MEMS市场在2007年增长百分之九,达到70亿美元,其中前30名制造商的收入总和有5...
table中给tr设置border-bottom无效
热门推荐
为天空着色
04-08 1万+
解决方法： 将tr所在table的css样式border-collapse设置为 collapse； 比如： table{border-collapse: collapse;} table tr{border-bottom:solid 1px #d0dee5;}
table表格中行与行间距
Sol的博客
09-01 9306
CSS border-collapse 属性设置表格的边框是否被合并为一个单一的边框 值描述separate默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。collapse如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。inherit规定应该从父元素继承 border-collapse
TR使用css的border不显示问题
dodott的专栏
08-02 5011
之前是: table width="99%" border="0" cellspacing="0" cellpadding="0">  tr style="border:1px solid #f7900f;background-color:#fff1cc;height:25px;">     td>信息标题、物品类型、游戏/区/服/td>     td>交易
关于在table中设置tr的格式的方法
梦想是成为一个弓箭手
03-02 4359
在做一个表格的时候我需要在第一行的tr上设置一个下边框，但当我直接在这个tr上加上border-bottom的时候发现并没有什么卵用，其实这样做是不对的。tr {border-bottom:1px solid #FFF;}在table中有一个默认的属性：border-collapse 参数： 1.separate 默认值。边框会被分开。不会忽略border-spacing 和 empty-cel
border-spacing,border-collapse
最新发布
07-19
### border-spacing 和 border-collapse 的区别 `border-spacing` 和 `border-collapse` 是 CSS 中用于控制表格边框间距的两个属性，它们在功能和使用场景上有显著的区别。 #### `border-collapse` `border-collapse` 属性用于控制表格边框是否合并。它有两个主要值： - `collapse`：将相邻单元格的边框合并为一个单一的边框，这样可以消除单元格之间的间隙。 - `separate`：保持单元格边框独立，单元格之间会有间隙，这种情况下 `border-spacing` 属性才会生效。 示例代码： ```css table { border-collapse: collapse; } ``` 当使用 `border-collapse: collapse;` 时，表格中的单元格边框会合并，使得表格看起来更加紧凑[^1]。 #### `border-spacing` `border-spacing` 属性只有在 `border-collapse` 设置为 `separate` 时才有效。它定义了相邻单元格边框之间的距离。可以接受一个或两个长度值，如果提供两个值，则第一个值表示水平间距（左右），第二个值表示垂直间距（上下）；如果只提供一个值，则同时用于水平和垂直间距。 示例代码： ```css table { border-collapse: separate; border-spacing: 10px 5px; } ``` 在上面的例子中，单元格之间的水平间距为 `10px`，垂直间距为 `5px`。如果只设置 `border-spacing: 10px;`，则水平和垂直间距都会是 `10px`。 ### 使用方法 - **border-collapse**：适用于希望表格边框紧密排列的情况，比如制作紧凑型表格。 - **border-spacing**：适用于需要精细控制表格单元格之间间距的情况，尤其是在 `border-collapse` 设置为 `separate` 时。 ### 注意事项 - `border-spacing` 不会影响表格的布局，它仅影响视觉上的间距。 - 在使用 `border-spacing` 时，必须确保 `border-collapse` 设置为 `separate`，否则 `border-spacing` 将不起作用。 ### 示例代码 下面是一个完整的 HTML 示例，展示了如何使用这两个属性： ```html <!DOCTYPE html> <html> <head> <style> table { border-collapse: separate; border-spacing: 10px 5px; border: 1px solid black; } td, th { border: 1px solid black; padding: 5px; } </style> </head> <body> <table> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> </tr> </table> </body> </html> ``` 在这个例子中，表格的单元格之间会有 `10px` 的水平间距和 `5px` 的垂直间距。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值