更改 tr 背景颜色无效问题

最新推荐文章于 2022-04-14 14:24:06 发布
最新推荐文章于 2022-04-14 14:24:06 发布
阅读量3.5k 收藏 2
点赞数 3
分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45702261/article/details/123289351
版权
在HTML中遇到更改<tr>背景颜色无效的问题，可能是由于CSS样式冲突导致。解决方法包括清除原有样式，使其透明，或者直接修改<tr>的背景色。此外，使用:hover和JavaScript事件改变行背景色时，需注意选择器的正确使用，以确保整行颜色变化。可以通过让<td>背景色继承<tr>来简化代码并保持效果。

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

更改tr背景颜色无效问题

📃在更改tr背景颜色时，我们肯定是想要整行颜色改变，但有时会出现只有部分改变 或 全都不改变的情况

❗这时我们就需要去看一下自己是否在之前设计的 CSS 样式中已经给定了tr中的td或th背景色，如果已经给定，那再设置tr的背景色显然优先级是不够的

✅解决方法（目前所知两种）：

  1. 先去掉原来td或th的背景色，使其背景透明，再设置tr的背景色，以达到通过tr改变整行背景色的目的
  2. 直接更改td或th的背景色，以改变整行的背景色

💦具体问题案例

由于我在设置th时偷懒，将整个table的th进行了统一设置，所以就有了以下样式（👉🏻大家一定要以我为戒，不要偷懒）
在这里插入图片描述
我第一次想到的解决办法是将下面的th再单独设置一次空白背景色，这确实现在看来没什么问题，但却给我下面的操作带来了麻烦🤦🏻‍♀️
在这里插入图片描述
我想要一个鼠标经过每一行都会改变背景颜色以便提醒我看到的是哪一行的效果，就需要用到onmouseover和onmouseout事件，我当时只获取了所有tr，想着改变一行tr就肯定可以让整行颜色跟着改变了吧（👋🏻现在看来是我天真了），他只变成了这种后面一半有颜色的效果
在这里插入图片描述
在一番百度之后，我知道th有背景色再去改变tr是不行的，虽然这时候背景颜色属性已经设置进去了，然后我就只能在每个事件里利用循环再给每个th改变背景色（🧓&

最低0.47元/天 解锁文章
linux上QT设置QComboBox背景色不生效、QTableWidget表头背景色不生效的解决方案
十三阿哥的博客
08-17 863
【代码】linux上QT设置QComboBox背景色不生效、QTableWidget表头背景色不生效的解决方案。
layui table组件在表格渲染完之后的回调中改变指定行的背景颜色的实现方法
cslover的博客
04-11 2654
我的需求如标题所述，在表格渲染完成后要根据某个字段的值，改变行的背景色，以达到凸显的目的。layui 没有这个功能的官方实现，需要自己实现，如果页面中只有一个table，那按照下面的方法用jquery遍历每一行就可以实现，如果有多个table，那就要加上table的id值 done: function(res, curr, count){ $.each(res.data, functio...
TR设置背景颜色不起作用
FeiChangWuRao的博客
05-18 8572
今天修改界面的时候发现有一个table里面设置tr的背景颜色没有反应，发现也没什么问题但是就是不行。打开浏览器F12发现添加的背景颜色属性已经设置进去了，但是就是没效果。 最后发现在tr里我是用th来接受的数据，应该在里面用td来接收，这样就可以显示颜色，网上的回答是，tr里面没有放td是不起作用的，tr里面的内容不能正常解析因为不符合html规范。...
table表格中tr背景色无法修改情况
funchowyu的博客
06-12 2349
在页面设计的过程中，给table表格中的tr增加背景颜色，不管是在样式表中还是在jsp文件中都没法修改tr的背景色，后来发现居然是tr的td表格已经增加了背景色，所以无论怎么给tr属性增加颜色都无法生效，所以这种情况下只能去掉td的背景色或者通过修改td的背景色去改变tr的背景色。 ...
为什么主页面引入css文件background不起作用_前端：原来你是这样的CSS
weixin_39830387的博客
12-04 1010
CSS介绍CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。CSS语法CSS实例每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。CSS注释/*这是注释*/ 注释是代码之母。CSS的几种引入方式行内样式行内式是在标记的style属性中设定CSS样...
table 》 tr 设置样式无效? table tr 这样设置才行，why？
codingWeb的博客
06-18 5297
今天碰到的一个问题，之前一直没有注意到，虽然很快找到问题所在了，但感觉有必要记录一下，希望有同样遇到这个问题的小伙伴，但没找到原因的，能看到这篇文章 先来看问题： html如下： 想让 tr变成红色背景 <style type="text/css"> table > tr { background-color: red; } </style> <body> <table border cellspacing="0" cellpaddi
table中为tr设置背景色出现间断及解决方案
wxCSDN1997的博客
04-14 1181
原文链接： 原文链接：https://blog.csdn.net/qq_37796475/article/details/80369455table中为tr设置背景色出现间断及解决方案_installing的博客-CSDN博客_table tr 背景色 解决方案：为table设置border-collapse属性，属性值为collapse，解决问题。 ...
layui table设置某一行的字体颜色方法
10-16
之后，通过索引直接修改该行`tr`标签的`style.color`属性来改变字体颜色。 3. 在调用这个函数时，需要确保在表格渲染完成之后。可以通过监听Layui的渲染完成事件来调用该函数。 以下是一个具体的函数示例，该函数...
html中table为每个单元格设置不同颜色和宽度
09-28
2. 要为单元格设置背景颜色，可以在标签内使用bgcolor属性，并指定一个颜色值。颜色值可以是十六进制的颜色代码、RGB值、RGBA值或者预定义的颜色名称。 3. 设置表格宽度和高度时，可以通过在标签中直接使用width和...
当鼠标移到单元格(tr、td)背景变色 多种解决方案
zhouzilong502086525的专栏
03-23 1万+
第一种：td单元格变色，只用简单的js代码即可实现。很简洁的代码，点击即可运行该代码<br /><body><br /><table border="1px"><br /> <tr><br />  <th id="id_item1" onmouseover="this.bgColor='green'" onmouseout="this.bgColor=''">Menu Item1</th><br /> </tr><br /> <tr><br />  <th>Menu Item2</th><br /> </t
vue设置背景色时的坑
weixin_58339224的博客
11-01 1558
使用vue的时候需要设置当前页面的背景色,但是你会发现当页面内容不够铺满整屏时 背景色不会铺满整屏 （红色为背景色） 这时候只需设置html body #app设置样式width: 100%;height: 100%; 设置当前页面 这样就能解决bei'jing's ...
更改表格行tr的背景颜色
weixin_45190226的博客
02-22 7686
一.业务代码说明： 制作一张商品信息表格，要求当鼠标移动到表格某一行的时候此行的背景颜色集会发生变化，当鼠标移开其背景颜色就会恢复为白色。 具体代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>change table row backGroundColor</title> <style>
HTML修改tr背景色,HTML tr bgcolor 属性
weixin_33095355的博客
06-07 3724
HTML bgcolor 属性在建立表格时，如果您需要为表格中的行添加背景颜色，那么可以使用 bgcolor 属性，下述的例子为表格的第一行添加了背景颜色，您可以尝试为该表格的第二行添加背景色(参考本手册的 HTML 颜色名一节)：实例给第一个表格行添加背景颜色：MonthSavingsJanuary$100尝试一下 »浏览器支持所有主流浏览器都支持 bgcolor 属性。定义和用法HTML5 ...
el-table设置表头背景色tr间距和tr背景色
热门推荐
qq_40576178的博客
09-18 2万+
1、设置表头背景色，在el-table标签上添加header-cell-style :header-cell-style="{background:'#000'}" 2、设置除表格内容的每行行高，在el-table标签上添加row-style :row-style="{height:80+'px'}" 3、设置表头文字样式 ::v-deep .el-table__header-wrapper { thead { th{ div{ font-weight: 700;
td的bgcolor属性覆盖tr的background属性，导致tr设置background颜色时显示不了
Sven的专栏
11-12 4406
下午在弄一个鼠标滑过表格行时变色的东西，做了一个Demo时，没有问题，但是放到项目中就不行了，看代码吧： <td width="3%" height="22" background=
Html table 页 实现点击选中tr行 改变背景颜色
WX_Scorpion的博客
10-14 1万+
Html table 页 实现点击选中tr行 改变背景颜色 table 表格展示数据时没有选中的效果，如果对展示数据 做了一些操作 会导致 不太容易分辨，所以选中效果就很重要，而这个事件需要作用于整个tr的所有td 而不是某个td。 具体请看代码，如果可以更加方便请指出，。 首先我们要把click确定在哪个tr上 ，关键获取tr是最重要的，可以根据不通的选择器实现 我使用的是id选择器 加上 标签...
<template> </div> <el-table :data=“tableData” border style=“width: 100%” class=“el-table”> <el-table-column fixed prop=“date” label=“日期” width=“150”> </el-table-column> <el-table-column prop=“name” label=“姓名” width=“120”> </el-table-column> <el-table-column prop=“province” label=“省份” width=“120”> </el-table-column> <el-table-column prop=“city” label=“市区” width=“120”> </el-table-column> <el-table-column prop=“address” label=“地址” width=“300”> </el-table-column> <el-table-column prop=“zip” label=“邮编” width=“120”> </el-table-column> <el-table-column fixed=“right” label=“操作” width=“100”> <template slot-scope=“scope”> <el-button @click=“handleClick(scope.row)” type=“text” size=“small”>查看</el-button> <el-button type=“text” size=“small”>编辑</el-button> </template> </el-table-column> </el-table> </div> </template> <script> export default { data() { return { searchKeyword: ‘’,// 搜索关键词 tableData: [{ date: ‘2016-05-02’, name: ‘王小虎’, province: ‘上海’, city: ‘普陀区’, address: ‘上海市普陀区金沙江路 1518 弄’, zip: 200333 }, { date: ‘2016-05-04’, name: ‘王小虎’, province: ‘上海’, city: ‘普陀区’, address: ‘上海市普陀区金沙江路 1517 弄’, zip: 200333 }, { date: ‘2016-05-01’, name: ‘王小虎’, province: ‘上海’, city: ‘普陀区’, address: ‘上海市普陀区金沙江路 1519 弄’, zip: 200333 }, { date: ‘2016-05-03’, name: ‘王小虎’, province: ‘上海’, city: ‘普陀区’, address: ‘上海市普陀区金沙江路 1516 弄’, zip: 200333 }] } }, methods: { handleSearch() { // 执行搜索逻辑 console.log(‘搜索内容：’, this.searchKeyword); // 实际开发中这里调用接口，传递 searchKeyword 进行数据查询 }, handleClick(row) { console.log(row); } } }; </script> <style scoped lang=“scss”> } //底部背景 .el-table { background: transparent !important; color: white; } //表头背景 ::v-deep .el-table th{ background: #245c8d !important ; height: 10px !important; } //行内背景 ::v-deep .el-table tr{ background: #245c8d !important ; height: 10px !important; } //表头字体颜色 ::v-deep .el-table thead{ color: white; } ::v-depp .el-table td,building-top .el-table th.is-leaf{ border-bottom: 2px solid #2C82BE !important; } // ::v-deep .el-table–enable-row-hover .el-table__body tr:hover>td{ // background-color: #245c8d !important; // } /* 修改鼠标悬浮效果 / .el-table tbody tr:hover > td { background-color: #000000 !important; / 新的高亮颜色 / cursor: pointer; / 更改光标形状 */ } </style>边框颜色，高度宽度、hover样式修改了但是无变化
最新发布
03-26
从你的代码来看，你已经尝试通过 `::v-deep` 来穿透 Scoped CSS 并修改 `.el-table` 的样式。然而，如果发现样式的修改无效，可能是由于以下几个原因导致的问题。接下来我们逐一排查并解决这些问题。 --- ### **1. 样式选择器优先级问题** Element UI 表格组件内部会生成一些默认的样式规则（如表头、行背景色等）。如果你的自定义样式优先级不够高，则可能会被默认样式覆盖掉。 #### 解决方案： 你可以增加选择器的具体性或直接添加 `!important` 声明来提升优先级。例如： ```css /* 提升选择器具体性和重要性 */ ::v-deep .el-table th { background: #245c8d !important; color: white !important; /* 确保文字可见 */ } ::v-deep .el-table tr { background: #245c8d !important; } ::v-deep .el-table td, ::v-deep .el-table th.is-leaf { border-bottom: 2px solid #2C82BE !important; } ``` --- ### **2. 错误拼写和语法问题** 检查你的代码中有几处潜在的小错误可能导致样式失效，包括但不限于： - `::v-depp` 应该是 `::v-deep`。 - 注释符 `/.../` 使用不当，应改为标准注释形式 `/* ... */`。 修正后的代码片段如下： ```css /* 修改鼠标悬浮效果 */ .el-table tbody tr:hover > td { background-color: #000000 !important; /* 新的高亮颜色 */ cursor: pointer; /* 更改光标形状 */ } ``` 同时，请确保所有其他地方也不存在类似拼写错误。 --- ### **3. 边框颜色未生效** 对于表格边框颜色修改失败的情况，通常是因为默认的 `border-style` 覆盖了新设置的颜色值。建议明确地指定所有的边框属性以避免冲突。 ```css ::v-deep .el-table td, ::v-deep .el-table th { border: none; /* 移除默认边框 */ } ::v-deep .el-table td, ::v-deep .el-table th.is-leaf { border-bottom: 2px solid #2C82BE !important; /* 设置新的底边线 */ } ``` --- ### **4. 高度和宽度无法正常应用** 如果是设置了高度但没有看到滚动条或其他布局异常的现象，这通常是由于父容器限制引起的。可以试着强制给`.el-table`设定具体的尺寸大小以及开启溢出滚动选项。 ```css .el-table { max-height: 400px; /* 最大高度 */ overflow-y: auto; /* 启用垂直滚动 */ } ``` 此外还需确认是否对某列设定了固定的宽度参数(`width="..."`) ，否则它将按内容自动扩展填充空间。 --- ### 综合优化版 SCSS 以下是整理好的完整版本样式代码供参考: ```scss .el-table { background: transparent !important; color: white; // 表头样式 ::v-deep th { background: #245c8d !important; color: white !important; height: 40px !important; } // 单元格边界线条 ::v-deep td, ::v-deep th.is-leaf { border-bottom: 2px solid #2C82BE !important; } // 行内背景 ::v-deep tr { background: #245c8d !important; color: white !important; height: 40px !important; } // 鼠标悬浮效果 tbody tr:hover > td { background-color: black !important; cursor: pointer; } } ``` --- ### **验证步骤** 完成以上修复之后按照以下顺序逐步测试每一个部分的效果: 1. 清理浏览器缓存再刷新页面看是否有变化； 2. 开启开发者工具逐层观察最终渲染出来的 DOM 元素结构及对应实际作用到上面的 CSS Rule List 是否包含了我们的预期规则项； 3. 若仍然存在问题则考虑升级框架版本或者切换主题模式试试。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值