table 》 tr 设置样式无效? table tr 这样设置才行，why？

最新推荐文章于 2024-09-26 20:38:32 发布

codingWeb

最新推荐文章于 2024-09-26 20:38:32 发布

阅读量5.1k

点赞数 6

分类专栏：前端 html css 文章标签： html css 前端

本文链接：https://blog.csdn.net/fesfsefgs/article/details/106821753

版权

本文记录了一个关于HTML table tr 样式设置无效的问题。问题出现在浏览器自动添加了`<tbody>`标签，导致CSS样式未应用到tr上。解决方案是直接针对`<tbody>`或使用`table > tr`选择器来设定样式。

摘要由CSDN通过智能技术生成

今天碰到的一个问题，之前一直没有注意到，虽然很快找到问题所在了，但感觉有必要记录一下，希望有同样遇到这个问题的小伙伴，但没找到原因的，能看到这篇文章

先来看问题：

html如下： 想让 tr变成红色背景


<style type="text/css">
			table > tr {
    
				background-color: red;
			}
</style>
<body>
		<table border cellspacing="0" cellpadding="0<

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

codingWeb

关注关注

6
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

html <th>样式设置,为什么table>tr>th等设置样式无效?

weixin_30029951的博客

07-14

2720

要坚信在一个html文件中 , 可以设置它所包含的 "子文件"中的元素的样式, 这是可以的,是有效的, 而且也只能这样设置!比如在a.html中, 可能设置了layout, layout中有tab的href是另外的b.html文件, 这样的话, b.html文件就是包含在 a.html文件中了.通常在 b.html文件中, 就是直接写body内容了, 不会再设置style样式了, 而且在b...

python selenium table_Selenium3+python3自动化（二十一）--table定位

weixin_39931101的博客

12-22

535

前言在web页面中经常会遇到table表格，特别是后台操作页面比较常见。本篇详细讲解table表格如何定位。一、认识table1.首先看下table长什么样，如下图，这种网状表格的都是table。2.源码如下：Table测试模板名称状况目标selenium自动化学习ing可以做一个项目，且能在面试时对答如流jmeter性能测试基本知识已学完，只会操作，不太能说出意思能独立设计性能测试流程，并能讲解...

1 条评论您还未登录，请先登录后发表或查看评论

tr设置样式失效

benhuanchen

10-05

4535

最近看《JavaScriptDOM编程艺术》第九章 function highlightRows() { if (!document.getElementsByTagName) return false; var rows = document.getElementsByTagName(&amp;amp;amp;amp;amp;quot;tr&amp;amp;amp;amp;amp;quot;); for (var i = 0; i &

HTML5：表格

最新发布

2401_84309743的博客

09-26

953

表格< table >< tr >< td >表格标签为< table >，行的标签为< tr >，表项的标签为< td >。< caption >标签< table >标签之后，为每个标签指定唯一标题。

[css] tr的border样式无效?

weixin_36089438的博客

12-21

4793

tr添加boder样式无效？为table添加border-collapse：collapse样式就解决了那么总结一下这几个会影响border显示的属性： 1 border-collapse属性设置表格的边框是否被合并为一个单一的边框当设置border-collapse:separate时候，table和td边框有效，tr边框无效当设置border-collapse:coll...

CSS知识：为什么给表格的tr设置border无效

qq_37898024的博客

03-22

2818

现象我们可以发现，在使用table的时候，当我们为tr设置边框的时候，并没有什么效果。原因表格，当我们写一个完整的表格我们可以发现，单元格与单元格之间是有一定的缝隙的，边框，顾名思义应该是一个完整的线条，但是现在一个完整的tr是由多个td组合在一起得到的，td与td之间并没有完全覆盖，这玩意无法给tr设置边框解决办法给table整体添加css样式 table{ border-c...

Table表格设置tr高度无效问题

彭于晏的博客

07-29

9151

给所有tr都设置同样高度时，第一行的tr无效其原因可能是，事先给table设置了高度，当所有tr的高度都达不到table的高度是，就会出现这种情况解决方法就是去掉table的高度

有关tr边框线设置无效

qq_61990666的博客

12-07

331

我们tr盒子内有td/th但是默认情况下，td和th的排布当中都是有空隙，不是内外边距，原本如div这种盒子行内块之间也有间距不会有边框线设置不了的情况，但是tr行会，他需要内部元素没有间隙，所以我们可以给td设置border-collaspe:collaspe会让相邻的边框线合并，则tr可以设置。当tr能设置了，且tdthtable都设置了，合并的时候，就只会留下一条，边框线左边的一条，上面的一条。要设置合并和分开得设置table整个才能变，只设置td没有一个会变。tr也是看table。

table无法设置tr边框的原因与解决方法

weixin_40380115的博客

04-29

3060

html中table设置tr行边框由于table中的每个单元格都有独立的边框，即每个td都有自己的边框，而一个tr中包含多个td。如下图所示，各个td中有间隔即无法为tr设置边框。要想为tr设置边框，需将tr中所有的td共享一个边框。在table样式中加入 border-collapse: collapse; 即将td合并为一个单一的边框，从而可以对tr进行边框设置。当然可以以在table中设置cellspacing为0，即td之间无间隔，再设置border，各个td之间的边框便可以连接起来，

Why cdkVirtualFor, not ngFor？

winner_118的专栏

11-04

512

为什么要用cdkVirtualFor在cdk-virtual-scroll-viewport控件上，ngFor可以么？

TS码流解析-2-获取完整的TABLE

小球萝卜干的博客

05-07

2186

任务二根据指定的table id 和 pid 获取完整的table。这是比较重要的一个环节，后面涉及到相关表的解析，都需要用到这里的函数。相关知识 1.首先了解TS数据包包头的结构，在这里贴一张ts包头的结构图各字段的解释： # 标识位数说明 0 sync_byte 8 bits 同步字节，固定是0x47 1 transport_error_indicator 1 b...

为Table中的thead加上边框

POJIE19820106的博客

07-13

691

出发点其实很简单，就是想做个这样的表：所以就先架构table的html代码： <tablecellspacing="0"> <thead> <tr><th>姓名</th><th>性别</th><th...

<table>中给<tr>设置border-bottom无效的原因和解决办法

weixin_40551017的博客

02-19

3856

引用自w3school border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。 separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。 collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。 i...

表格的tr设置border无效的原因

weixin_37680021的博客

04-23

3036

表格的tr设置border无效的原因原因解决办法原因当我们写一个完整的表格我们可以发现，单元格与单元格之间是有一定的间隙的。边框，应该是一个完整的线条，但是，现在一个完整的tr是由于多个td组合在一起得到的这就是的无法给tr设置边框了 table{ border: 1px solid red; } th, td{ border: 1px solid #333; } tr{ border: 1px solid green; } 解决办法给table整体添加css样式 ta

解决el-table 样式不生效问题

weixin_44242595的博客

01-23

1083

设置el-table背景透明。在全局css设置样式。

css border-collapse:collapse解决表格tr边框无效的问题

qq_42112846的博客

12-11

5593

今天写了一个表格，并将表格的tr设置了边框样式border-bottom: 1px #ccc dashed;但这个css样式貌似没有取到任何作用，先让大家看一下我的html css代码 <table> <tr style="border-bottom: 1px #ccc dashed;"> <td height="30" width="75">标题...

table中设置tr行间距的margin不起作用解决方案

徊忆羽菲

09-28

4772

table中设置tr行间距的margin不起作用解决方案解决方案解决方案 CSS border-collapse 属性设置表格的边框是否被合并为一个单一的边框 border-collapse属性加上border-spacing属性就可以设置tr行间距 <table style="border-collapse:separate; border-spacing:0px 10px;"> <tr> <td>那片笑声躺我想起我的那些花儿</td>

td tr th样式设置踩坑

harry_yaya的博客

04-22

2174

错误写法 <div className={styles.selfAchievement}> //div <tr className={styles.selfAchievementTr}> <td>1</td> <td>2</td> <td>3</td> ...

HTML中tr标签设置边框不显示的解决办法

weixin_34128839的博客

06-11

2007

今天在操作表格的时候发现设置表格中行的边框没有显示，然后自己新建了一个表格发现确实不显示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://...