在第一行有 rowspan 的情况下,在表格的第一行设置 css 样式

2024-03-18

我有很多表,想要在表的第一行设置 css 样式,前提是第一行有行跨度。

<table>
<tbody>
<tr>
<td rowspan="2" width="110">Name</td>
<td width="110">Size</td>
<td width="110">Status</td>
</tr>
<tr>
<td>Meter</td>
<td>true/false</td>
</tr>
<tr>
<td>Code A</td>
<td>1</td>
<td>false</td>
</tr>
</tbody>
</table>

通过这种风格,我尝试更改第一行:

thead tr:first-child,
tbody tr:first-child {
  background-color: #1DA6C0;color: #fff;
}

So I looking for a css style to change table just like Image: enter image description here


您可以使用以下方法在 Javascript 后台设置它:

第 n 个子级(-n+${rowspan})

Eg.

let tr = document.getElementsByTagName("tr")[0];
let td = tr.getElementsByTagName("td")[0];
let rowspan = td.rowSpan? td.rowSpan:1; 
var nodes = document.querySelectorAll(`tbody tr:nth-child(-n+${rowspan})`);
for (let i = 0; i < nodes.length; i++) {
  nodes[i].style.background = '#1DA6C0';
}

https://jsfiddle.net/xugL8s9b/10/ https://jsfiddle.net/xugL8s9b/10/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在第一行有 rowspan 的情况下,在表格的第一行设置 css 样式 的相关文章

  • 使用后代选择器的响应式网站

    我试图使用媒体查询使我的网站响应 但是当我在代码的某些部分使用后代选择器时 页面没有响应 当我使用此代码时 该页面是响应式的 div1 float left width 20 height 200px background color re
  • 使用 php 变量更改 css 类

    这里需要您的帮助 正如标题所示 我正在尝试使用 PHP 变量更改 css 类 所以基本上我想创建一个回显某些代码的循环 但我希望第一个循环中的 div 类有所不同 它应该被隐藏 这是我为使问题变得清晰而编写的简化代码 我不知道错误在哪里 请
  • CSS动画可见性:可见;适用于 Chrome 和 Safari,但不适用于 iOS

    在Chrome WinXP上为19 0 1084 46 m 和Safari OS X 10 7 4上为5 1 7 中 这个小提琴http jsfiddle net Vkpwm http jsfiddle net Vkpwm 作品 单击goo
  • 无法在 css 中使用 .ani 光标?

    我自定义了网站的光标 但是CSS光标 url 仅适用于 gif png 或 cur 我想使用 ani 文件 但它只能在 IE 中使用 cursor url img mcursor cur auto IE 使用 Windows API 支持
  • 如何在 scss 中包含仅限 Safari 的样式? [复制]

    这个问题在这里已经有答案了 我只是想修改仅适用于 safari 浏览器的样式属性 这将覆盖默认属性 简单的例子 Default div color blue Safari 浏览器 div color red 我想这可以通过 scss 的 i
  • 如何在 HTML5/CSS3 中将视口锁定为纵向方向

    是否可以在移动设备上将视图端口的方向锁定为纵向 我用谷歌搜索了它 但无法找到确切的操作方法 这个技巧应该有效 media screen and orientation landscape html Rotate the content co
  • 检测 iPad Safari 用户的最佳方法

    添加用于检测 iPad Safari 用户的代码的最佳方法是什么 我的意思是我们应该使用 1 CSS 通过链接媒体 2 JS 通过navigator对象 我听说使用用户代理字符串并不是检测 iPad 的最佳方法 因为存在不一致的情况 请建议
  • 将 DIV 转换为单击并拖动视口

    有人知道一种不显眼的 基于原型或无框架的方法将具有大内容 例如地图 的 DIV 转换为具有固定尺寸的可点击和可拖动的 地图 容器 非常像 Google 地图 我想在大型输入表单中显示 HTML 块 这些块可能会超出可用空间 每个块可以有大约
  • 我可以使用 :hover 触发 CSS3 动画(或过渡),即使鼠标不再悬停,该动画也会继续运行

    我正在创建一个链接列表 其中一个链接容器在悬停时会展开 包含详细信息 图像和说明 我用 CSS 过渡或动画来制作动画没有任何问题 问题是我希望它即使在鼠标移开后也能保持展开状态 我想在没有 JavaScript 的情况下做到这一点 那可能吗
  • CSS 未使用 req.params 或其他内容加载

    我对节点 表达等非常陌生 我制作了一个博客应用程序 但遇到了问题 我正在使用 mongoose node express 和 ejs 当我打电话时 router get posts function req res Post find fu
  • 从纵向旋转到横向时的字体大小问题

    解决了它 webkit text size adjust 100 Prevent font scaling in landscape while allowing user zoom 从纵向旋转到横向时 我遇到了一个小的字体大小问题 在 s
  • 表格内的垂直滚动条不显示:块

    有没有办法在里面有一个垂直滚动条 tbody 一张桌子并有display table放在桌子上但不使用display block桌子内的任何地方 对于滚动条部分 将其添加到要滚动的标签中 style overflow y scroll tb
  • 是否可以删除将鼠标悬停在链接上时出现的手形光标? (或将其设置为普通指针)

    我想删除当您将鼠标悬停在超链接上时出现的手形光标 我试过这个CSS a link cursor pointer 和这个 a link cursor pointer important 当我将鼠标悬停在链接上时 它仍然会变成手 有谁知道为什么
  • 上传时自动缩小 CSS 和 Javascript

    有谁知道通过上传处理 脚本自动运行某些文件类型的好方法 当我将 CSS 和 Javascript 上传到服务器时 我试图自动缩小它们 在本地保留一个漂亮的 人类可读的版本 同时在服务器上保留一个缩小的版本 我目前在 Windows 上使用
  • HTML:您可以隐藏/忽略浏览器查找中的文本元素 (CTRL+F)

    我有一个具有相当复杂的 UI 的 Web 应用程序 并且屏幕的一部分保留用于内容 如果可能的话 我想这样做 以便当用户使用浏览器的内置文本搜索 CTRL F 时 UI 中的任何文本都将被忽略 并且仅搜索实际内容 这可行吗 CSS 和 Jav
  • 如何禁用向左滚动?

    I got a div 元素 parent 包含多个子元素 item 我想启用滚动父元素一个方向 left OR正确的 否则什么都不会发生 看我的代码 parent scroll function gt gt gt scroll event
  • 选择 jQuery 中的每第 n 个项目?

    jQuery 有方便的 even 和 odd 选择器 用于选择集合中偶数或奇数索引的项目 我用它来清除一系列浮动框中的所有其他项目 如下所示 div class 2up div div div div div div div and Cle
  • 通过列计数拆分时重复表头

    我正在 Magento 中输出产品列表 作为包装在表格中的简单列表 由于此列表可能会很长 100 个以上产品 因此我使用了来自这里的想法 https stackoverflow com questions 21001803 how to h
  • 防止文本环绕浮动图像

    我目前有一个向左浮动的图像 以及位于其右侧的一段文本 该文本块当前不是浮动的 它只是位于 HTML 中的图像之后 因此 当它变得更长时 它最终会踢到图像下方的左侧以继续 如何才能使文本块始终保持在图像的右侧 以便图像和文本的行为就像两个并排
  • IE9支持CSS线性渐变吗?

    有了 Chrome Safari 和 Firefox webkit gradient and moz linear gradient特性 我怎样才能用 IE9 做同样的事情呢 最好的跨浏览器解决方案是 background fff back

随机推荐