Highlighting All Rowspans Within a Table Row Using CSS Only

Highlight rows with rowspan

You can use multiple <tbody> elements to define areas on your table. In this case you have one <table> element with some groups of rows. Using multiple <tbody> elements in <table> element is also valid HTML5.

table {  width: 100%;}
td { border-top: 1px solid silver;}
tbody tr:nth-child(1) td { border-top: 3px double silver;}
tbody:hover tr { background-color: lightgray;}
<html>  <head></head>  <body>    <table>      <tbody>        <tr>          <td rowspan="3">1</td>          <td rowspan="3">Text 1</td>          <td>Sub A 1</td>          <td>Sub B 1</td>        </tr>        <tr><td>Sub A 2</td><td>Sub B 2</td></tr>        <tr><td>Sub A 3</td><td>Sub B 3</td></tr>      </tbody>      <tbody>        <tr>          <td rowspan="5">2</td>          <td rowspan="5">Text 2</td>          <td>Sub A 1</td>          <td>Sub B 1</td>        </tr>        <tr><td>Sub A 2</td><td>Sub B 2</td></tr>        <tr><td>Sub A 3</td><td>Sub B 3</td></tr>        <tr><td>Sub A 4</td><td>Sub B 4</td></tr>        <tr><td>Sub A 5</td><td>Sub B 5</td></tr>      </tbody>    </table>  </body></html>

highlighting all rowspans within a table row using CSS only

There is a JSBin.

I omit your part code, just for easily display.

The key of the issue is about <tbody>. A table must have a <thead>,but can have many <tbody>.
So, use these code:

tbody:hover .td {
background-color: blue;
}

How do I highlight two table rows where one row has a cell with a rowspan property?

The tbody tag is a group, and you can use it multiple times:

table {  border-collapse: collapse;}
tbody:hover { background: #CCC;}
<table border="1">  <tbody>    <tr>      <td rowspan="2">Text here</td>      <td>The row 1 text goes here</td>    </tr>    <tr>      <td>The row 2 text goes here</td>    </tr>  </tbody>  <tbody>    <tr>      <td rowspan="2">Text here</td>      <td>The row 1 text goes here</td>    </tr>    <tr>      <td>The row 2 text goes here</td>    </tr>  </tbody>  <tbody>    <tr>      <td rowspan="2">Text here</td>      <td>The row 1 text goes here</td>    </tr>    <tr>      <td>The row 2 text goes here</td>    </tr>  </tbody></table>

css mouseover highlight with table rowspan

I had meet same problems in my projects.We cannot do it.That is why most of all developers perefered jquery DOM traversing methods(parent(),child(),sibling(),next(),prev(),After(),etc..,)

Reference: Is there a CSS parent selector?

Conclusion is :there is no option in CSS for select the parent.we can with javascript help.

**we love coding..*

How can you put 'rowspan' specific CSS in an html table?

The answer that works for me (from @RobG's comment) is dividing the groups rows into sections using <tbody>. Then I can refer to each tbody's nth-child.

Here's the modified example that works:

table tr,td {  border: 1px solid black;}tbody:nth-child(1) {  background-color: red;}tbody:nth-child(2) {  background-color: blue;}
<table>  <tbody>  <tr>    <td rowspan=2>Section 1</td>    <td>Data 1a</td>  </tr>  <tr>    <td>Data 1b</td>  </tr>  </tbody>  <tbody>  <tr>    <td rowspan=3>Section 2</td>    <td>Data 2a</td>  </tr>  <tr>    <td>Data 2b</td>  </tr>  <tr>    <td>Data 2C</td>  </tr>  </tbody>

Highlight cells in hovered row in HTML table which have no rowspan

You can't create a single selector that does that, but you can add another selector that overrides highlighted background:

<!DOCTYPE html>
<style>
tr:hover td:not([rowspan]) {background: red}
tr:hover td[rowspan]:hover ~ td {background: none;}
</style>
<table>
<tr><td rowspan=2>c1</td><td>cx</td><td>cx</td></tr>
<tr><td>cx</td><td>cx</td></tr>
</table>

td:hover ~ td means any <td> (with the same parent) that is after the hovered <td>.

Bootstrap table-hover with rowspan to highlight all rows the cell belongs to

I came up with this solution:

jQuery(() => {
if ($("#table-multi-hover").length) {
const headerValues = Array.from($("thead")[0].children[0].children)
.map(item => item.innerText.toLowerCase());

let table = [];

const tableCells = Array.from($("tbody")[0].children)
.map(item => item.children)
.map(item => Array.from(item));

for (let i = 0; i < tableCells.length; i++) {
let tempObj = {};
for (let j = 0; j < tableCells[i].length; j++) {
tempObj[tableCells[i][j].attributes.rep.value] = tableCells[i][j];
}

for (let j = 0; j < headerValues.length; j++) {
if (i != 0 && tempObj[headerValues[j]] == undefined) {
tempObj[headerValues[j]] = table[i - 1][headerValues[j]];
}
}
table.push(Object.assign({}, tempObj));
}

$("tbody td, tbody th").on("mouseover", event => {
const rowIndex = parseInt(event.currentTarget.parentElement.attributes.i.value);
const rep = event.currentTarget.attributes.rep.value;
const rowspan = event.currentTarget.attributes.rowspan != undefined ?
parseInt(event.currentTarget.attributes.rowspan.value) : 1;

for (let i = 0; i < rowspan; i++) {
for (let j in table[rowIndex + i]) {
$(table[rowIndex + i][j]).addClass("red-bg");
}
}
});

$("tbody td, tbody th").on('mouseleave', event => {
const rowIndex = parseInt(event.currentTarget.parentElement.attributes.i.value);
const rep = event.currentTarget.attributes.rep.value;
const rowspan = event.currentTarget.attributes.rowspan != undefined ?
parseInt(event.currentTarget.attributes.rowspan.value) : 1;

for (let i = 0; i < rowspan; i++) {
for (let j in table[rowIndex + i]) {
$(table[rowIndex + i][j]).removeClass("red-bg");
}
}
});
}
});
td,
th {
text-align: center;
vertical-align: middle !important;
}

.red-bg {
background-color: red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table text-center text-nowrap table-bordered" id="table-multi-hover">
<thead>
<tr>
<th scope="col" class="h5 font-weight-bold">
Date
</th>
<th scope="col" class="h5 font-weight-bold">
Title
</th>
<th scope="col" class="h5 font-weight-bold">
Amount
</th>
<th scope="col" class="h5 font-weight-bold">
Price
</th>
<th scope="col" class="h5 font-weight-bold">
Value
</th>
</tr>
</thead>

<tbody>
<tr i="0">
<th rowspan="3" scope="row" rep="date">2020-06-25</th>
<td rowspan="2" rep="title">Some name 1</td>
<td rep="amount">2</td>
<td rep="price">30.00 PLN</td>
<td rep="value">60.00 PLN</td>
</tr>
<tr i="1">
<td rep="amount">1</td>
<td rowspan="2" rep="price">20.00 PLN</td>
<td rep="value">20.00 PLN</td>
</tr>
<tr i="2">
<td rep="title">Some name 2</td>
<td rep="amount">2</td>
<td rep="value">40.00 PLN</td>
</tr>
<tr i="3">
<th rowspan="3" scope="row" rep="date">2020-06-24</th>
<td rowspan="2" rep="title">Some name 1</td>
<td rep="amount">2</td>
<td rep="price">30.00 PLN</td>
<td rep="value">60.00 PLN</td>
</tr>
<tr i="4">
<td rep="amount">1</td>
<td rowspan="2" rep="price">20.00 PLN</td>
<td rep="value">20.00 PLN</td>
</tr>
<tr i="5">
<td rep="title">Some name 2</td>
<td rep="amount">2</td>
<td rep="value">40.00 PLN</td>
</tr>
</tbody>
</table>


Related Topics



Leave a reply



Submit