给<tr>标签添加边框

最新推荐文章于 2025-09-18 10:06:56 发布
转载 最新推荐文章于 2025-09-18 10:06:56 发布 · 499 阅读 · 0
文章标签：

#javascript #ViewUI

本文介绍了解决HTML表格中&lt;tr&gt;元素边框显示问题的方法。通过给&lt;table&gt;应用CSS属性`border-collapse:collapse;`，可以确保表格边框正确显示为单一连续边框。

今天做网站时发现给<tr>添加border无效。起初还以为tr不支持这个属性，百度，原来只要给<table>添加一句代码就可以了，代码如下：

table{border-collapse: collapse;}

border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是像在标准的 HTML 中那样分开显示。

HTML 基础标签——表格标签＜table＞
Allen-
11-01 900
HTML 表格是用于在网页中组织和显示结构化数据的强大工具。通过表格标签，您可以创建复杂的数据布局
设置tr的边框
程君的专栏
10-15 2万+
有时候有设置tr边框的需求，写下如下css tr{ }
给表格（table）中行（tr）设置边框（border）
h_jQuery的博客
05-02 4155
给tr设置以下代码无效时： border-bottom: 1px solid #e5e5e5; 在表格中加以下属性就可以解决： table { border-collapse: collapse; }
给tr添加边框
weixin_30372371的博客
07-12 597
当给 table 添加样式border-collapse: collapse;时，再给tr设置边框才有效果； table{border-collapse: collapse;} table tr{ border:1px solid #000; } 如果去掉了这个属性，单独给 tr 设置 时，就没有效果。 边框不折叠的表格 行,列，行组和列组是不具有border的 转载于:ht...
如何给表格的tr加上下边框
Simoon
02-22 2772
直接给tr上加上border-bottom的时候发现边框不会正常显示，查找资料后总结如下： 在table中有一个默认的属性：border-collapse 参数： 1.separate 默认值。边框会被分开。不会忽略border-spacing 和 empty-cells 属性。 2.collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。 3.inherit 规定应该从父元素继承border-collapse 属性的值。 这样就找到原
tr标签单独添加border
qq_39122996的博客
10-21 1043
直接定义table tr{ border-bottom: 1px solid #e5e5e5; }是不生效的，有border但是不显示； 必须在tr外层的table标签添加border-collapse: collapse;属性 table{ border-collapse: collapse; } table tr{ border-bottom: 1px solid #e5e5e5;...
HTML `＜tr＞` 标签深度解析：构建表格行的基石
2501_93104808的博客
09-18 1037
HTML <tr> 标签摘要 <tr> 标签是 HTML 表格的核心元素，用于定义表格行。作为表格的横向骨架，它通过包裹<th>和<td>单元格来组织数据。主要特点包括： 结构关系：必须位于<table>、<thead>、<tbody>或<tfoot>内，只能包含<th>/<td> 语义化：建议与<thead>、<tbody>等分组标签配合使用，提升可访问性 样式控
给 <tr> <td>数据4</td> <td>数据5</td> <td>数据6</td> </tr>，<tr>标签设置下边框
09-06
在这个例子中，我们首先在`<style>`标签内定义了一个CSS类`.table-with-bottom-borders`，为所有在这个类下的`<tr>`标签内的`<td>`标签添加了黑色的1像素宽度下边框。然后，我们通过为`<tr>`标签添加`class="table-...
<table border='1'> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr> <td>张三</td> <td>18</td> </tr> <tr> <td>李四</td> <td>19</td> </tr> </table>
最新发布
10-05
<think>首先，用户提供了一个HTML表格代码：`<table border='1'><tr><th>姓名</th><th>年龄</th></tr><tr><td>张三</td><td>18</td></tr><tr><td>李四</td><td>19</td></tr></table>` 用户要求我分析这个HTML表格...
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>太阳系行星数据</title> <link href="minimal-table.css" rel="stylesheet"> </head> <body> <h1>太阳系行星数据</h1> <header> <table id="table"> <caption> 太阳系中行星的一些数据。（资料取自<a href="http://nssdc.gsfc.nasa.gov/planetary/factsheet/">NASA 行星数据 - 公制</a>，图片取自<a href="https://www.nasa.gov/multimedia/imagegallery/">NASA 照片库。</a>） </caption> <thead> <td colspan="2"></td> <th scope="col" class="name-column" >名字</th> <th scope="col">图片</th> <th scope="col">质量 (10<sup>24</sup>kg)</th> <th scope="col">直径 (km)</th> <th scope="col">密度 (kg/m<sup>3</sup>)</th> <th scope="col">重力 (m/s<sup>2</sup>)</th> <th scope="col">天长 (小时)</th> <th scope="col">平均温度 (°C)</th> <th scope="col">卫星数量</th> <th scope="col">备注</th> </thead> <tbody> <tr> <th colspan="2" rowspan="4" scope="rowgroup">类地行星</th> <th>水星</th> <td>0.330</td> <td>4879</td> <td>5427</td> <td>3.7</td> <td>4222.6</td> <td>57.9</td> <td>167</td> <td>0</td> <td>距太阳最近</td> </tr> <tr> <th>金星</th> <td>4.87</td> <td>12104</td> <td>5243</td> <td>8.9</td> <td>2802.0</td> <td>108.2</td> <td>464</td> <td>0</td> <td></td> </tr> <tr> <th>地球</th> <td>5.97</td> <td>12756</td> <td>5514</td> <td>9.8</td> <td>24.0</td> <td>149.6</td> <td>15</td> <td>1</td> <td>我们的世界</td> </tr> <tr> <th>火星</th> <td>0.642</td> <td>6792</td> <td>3933</td> <td>3.7</td> <td>24.7</td> <td>227.9</td> <td>-65</td> <td>2</td> <td>红色星球</td> </tr> <tr> <th rowspan="4" scope="rowgroup">类木行星</thead> <th rowspan="2" scope="rowgroup">气巨星</th> <th>木星</th> <td>1898</td> <td>142984</td> <td>1326</td> <td>23.1</td> <td>9.9</td> <td>778.6</td> <td>-110</td> <td>67</td> <td>太阳系最大</td> </tr> <tr> <th>土星</th> <td>568</td> <td>120536</td> <td>687</td> <td>9.1</td> <td>10.7</td> <td>1433.5</td> <td>-140</td> <td>62</td> <td></td> </tr> <tr> <th rowspan="2" scope="rowgroup">冰巨星</th> <th>天王星</th> <td>86.8</td> <td>51118</td> <td>1271</td> <td>8.7</td> <td>17.2</td> <td>2872.5</td> <td>-195</td> <td>27</td> <td></td> </tr> <tr> <th>海王星</th> <td>102</td> <td>49528</td> <td>1631</td> <td>11.0</td> <td>16.1</td> <td>4495.1</td> <td>-200</td> <td>14</td> <td></td> </tr> <tr> <th colspan="2" scope="row">矮行星</th> <th>冥王星</th> <td>0.0146</td> <td>2370</td> <td>2095</td> <td>0.7</td> <td>153.3</td> <td>5906.4</td> <td>-225</td> <td>5</td> <td>2006年降格，但<a href="http://www.usatoday.com/story/tech/2014/10/02/pluto-planet-solar-system/16578959/">尚存争议</a></td> </tr> </tbody> </table> </body> </html> 这个是全部代码。我现在要在“名字”这一列添加一个整体的黑色边框应该怎么弄
08-06
但是，这里有一个问题：我们给<col>设置边框，但浏览器可能不支持。所以，我们改为直接对单元格设置样式。 修改方案：不使用<col>的类来设置边框，而是通过列的位置（nth-child）来设置。但是，如果表格结构复杂...
怎么样给tr添加下边框
baidu_35290582的博客
12-28 2514
怎么样给tr添加下边框 直接给tr标签添加如下代码：在这里插入代码片 tr { border-bottom: 1px solid #ccc; } 运行后发现，表格没有变化。思考后才知道，表格table有一个默认属性border-collapse。 参数如： 1.* separate* 默认值。边框会被分开。不会忽略border-spacing 和 empty-cells 属性。 该默认属性如下： 2.* collapse* 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 em
tabel布局中给tr加border边框
CherryLee_1210的博客
06-08 1万+
今儿自己在做项目时，用到了table布局。 但是设计给的是每行有底边框。这个给难到自己了，后来自己搜索解决了。 &lt;table&gt; &lt;tr&gt; &lt;td&gt; &lt;p&gt;奖池金额：&lt;/p&gt; &lt;/td&gt; &lt;td&gt; &lt;p&gt;25000*2=&lt
如何给Table每一行tr设置border？
qq_33739887的博客
08-09 1233
你可以根据具体需求选择合适的方法。两种方法的区别在于第一种方法通过设置。的边框起作用，而第二种方法通过设置。的边框合并成单一的边框，允许在。来去除单元格之间的间隙，并在。使得单元格之间没有间隙，并在。这种方法通过将表格的。
table中为tr设置border
风雨飘飘飘啊飘的博客
04-15 4709
在web开发过程中，我们有时候需要给tr一整行添加border，需要展示如下图的效果： 但是通过设置tr的border并没有什么作用，比如下面的代码这样。 tr{ border-top:0.01rem solid rgba(102,102,102,0.1); } 因为table中的tr并不是一个单一的边框，这个时候我们需要给table设置border-collapse属性，将一行表格设置成...
如何给table表格的tr行加边框
热门推荐
mwtopfire的博客
06-03 3万+
tr是html标签中行的标记，在web开发中，有时候我们为了美观需要修改行的属性。比如tr的边框。如果我们按照如下的形式修改tr的属性就大错特错了.        tr{          border: 1px solid #f5f6f8;  }               这样是没有任何效果的。因为表格中的tr并非单一的边框，这样便需要属性border-collapse
为表格中 tr 添加 border 无效问题
PorkCanteen的博客
11-22 2064
在给表格中 添加 border 时发现并没有显示出来。 tr{ border-bootom:1px solid #e5e5e5; } 解决方式为给 table 标签添加如下样式： table { border-collapse: collapse; } border-collapse CSS 属性是用来决定表格的边框是分开的还是合并的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框。 合并（collapsed ）模式下，表格中相邻单元格共享边框。 分隔（separa
给tr加边框无效解决方案
zlzbt
04-26 6527
&lt;table&gt; &lt;tr style='border:1px solid #000'&gt; &lt;td&gt;12&lt;/td&gt; &lt;td&gt;2&lt;/td&gt; &lt;td&gt;12&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt;
给tr设置border无效怎么办
lucky__peng的博客
04-25 1151
tr设置border无效时，给tr所在table的css样式加上 border-collapse: collapse;
<table>中给<tr>设置border-bottom无效的原因和解决办法
weixin_40551017的博客
02-19 4085
引用自w3school border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。 separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。 collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。 i...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值