在表格的第一行设置css样式，以防第一行有rowspan

我有很多表格，想在表格的第一行设置css样式，以防第一行有rowspan

<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>

因此，我正在寻找一种css样式来更改表格，就像图片一样：

---

我认为CSS不可能做到这一点。 您必须根据行跨度将样式动态添加到单元格中。 这里我假设您只能在tbody的第一个单元格上有行跨度

<script>
  $(function () {
   $("#mytable tr:nth-child(1) td:nth-child(1)").each(function () {
    let rowspan = this.getAttribute("rowspan")
    var css = `tbody tr:nth-child(-n+${rowspan}) {background-color: #1DA6C0;color: #fff;}`,
    head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');
    head.appendChild(style);
    style.type = 'text/css';
    if (style.styleSheet) {
     style.styleSheet.cssText = css;
    } 
    else {
     style.appendChild(document.createTextNode(css));
    }
  });
 });
</script>

$（函数（）{
$（“#mytable tr:n个子项（1）td:n个子项（1）”）。每个（函数（）{
让rowspan=this.getAttribute（“rowspan”）
var css=`tbody tr:n个子（-n+${rowspan}）{背景色：#1DA6C0；颜色：#fff；}`，
head=document.head | | document.getElementsByTagName（'head'）[0]，
style=document.createElement（'style'）；
头。附属物（样式）；
style.type='text/css'；
if（style.styleSheet）{
style.styleSheet.cssText=css；
} 
否则{
appendChild（document.createTextNode（css））；
}
});
});

您可以在Javascript后台使用以下命令进行设置：

n个子项（-n+${rowspan}）

例如

let tr=document.getElementsByTagName（“tr”）[0]；
设td=tr.getElementsByTagName（“td”）[0]；
让rowspan=td.rowspan？td.行距：1；
var nodes=document.querySelectorAll（`tbody tr:n个子（-n+${rowspan}）`）；
for（设i=0；i

---

请检查一下，因为您的代码在这个示例中不太适用。谢谢。是的，因为它只针对一个表，所以您必须在您的案例中循环浏览这些表。例如，根据您的用例进行修改：）

<script>
  $(function () {
   $("#mytable tr:nth-child(1) td:nth-child(1)").each(function () {
    let rowspan = this.getAttribute("rowspan")
    var css = `tbody tr:nth-child(-n+${rowspan}) {background-color: #1DA6C0;color: #fff;}`,
    head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');
    head.appendChild(style);
    style.type = 'text/css';
    if (style.styleSheet) {
     style.styleSheet.cssText = css;
    } 
    else {
     style.appendChild(document.createTextNode(css));
    }
  });
 });
</script>

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';
}