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
CSS3 Transform Property Working Differently in Internet Explorer
Vertically Center Div When Body Height: 100% Without Absolute Pos
Equivalent for '-Moz-Element' in Other Browsers
Ie 6,7,8,9 CSS Compatibility Stylesheet
Helvetica Neue' and Helvetica Font
What Does Mean /*! Some Url or Text */ in CSS
Implementing @Font-Face as of Late 2012
Working with CSS Floats in HTML2Pdf
Targeting Specific Column in Table
How to Stop CSS Hyphenation, No Dash Between Words
Explain Regex That Finds CSS Comments