Showcase rows that contain rowspan functionality

I am looking for a way to highlight rows in HTML tables with rowpans when hovering over a row. Ideally, I would like this to be achievable using only CSS with minimal or no Javascript involved. Currently, the table row gets highlighted, but if there is a 'sub' row, it highlights only that specific part instead of the entire row it visually belongs to.

table {
  width: 100%;
}

.topLevelRow td {
  border-top:double 3px silver;
}

td {
  border-top:solid 1px silver;
}

tr:hover {
  background-color:lightgray;
}
<html>
  <head></head>
  <body>
    <table>
      <tr class="topLevelRow">
        <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>
      <!-- . -->
      <tr class="topLevelRow">
        <td rowspan="5">2</td>
        <td rowspan="5">Text 2</td>
        <td>Sub A 1</td>
        <td rowspan="1">Sub B 1</td>
      </tr>
      <tr><td rowspan="1">Sub A 2</td><td rowspan="1">Sub B 2</td></tr>
      <tr><td rowspan="1">Sub A 3</td><td rowspan="1">Sub B 3</td></tr>
      <tr><td rowspan="1">Sub A 4</td><td rowspan="1">Sub B 4</td></tr>
      <tr><td rowspan="1">Sub A 5</td><td rowspan="1">Sub B 5</td></tr>
      
    </table>
  </body>
</html>

It seems that the highlighting only covers part of the rows. Is there a way to make sure all parts of the row are highlighted?

htmlcss

Answer №1

If you want to create different sections within your table, you can achieve this by using multiple <tbody> elements. Essentially, each <tbody> defines a distinct area in the table. This practice is considered valid in 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>

Answer №2

Expanding on Sebastian's response - in the year 2024, it is now achievable to enhance the highlighting effect using pure CSS by incorporating :has and :not selectors.

If you hover over multi-row columns, the entire row will be highlighted exclusively. However, when hovering over a single-row column, only the "shared" rows along with the current row will be highlighted solely. It may seem complex in words, but viewing the example below will clarify the concept.

table {
  width: 100%;
}

td {
  border-top: 1px solid silver;
}

tbody tr:nth-child(1) td {
  border-top: 3px double silver;
}

/* When hovering over a <td> without rowspan, highlight the entire tbody */
tbody:has(td[rowspan]:hover) td {
    background-color: red;
}
/* Hovering over a <td> WITH rowspan indicates it's a sub-row.
   Therefore, only that specific row should be highlighted.*/
tr:has(td:not([rowspan]):hover) {
    background-color: red;
}
/* Lastly, the rowspan columns should be highlighted if 
   non-rowspan columns are hovered*/
tbody:has(td:not([rowspan]):hover) td[rowspan] {
      background-color: red;
}
<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>

Answer №3

To simplify the structure, consider breaking the table after each block. This approach is straightforward but may vary depending on the capabilities of your template engine or similar tools.

table {
  width: 100%;
}

table:hover {
  background-color:lightgray;
}

.topLevelRow td {
  border-top:double 3px silver;
}

td {
  border-top:solid 1px silver;
}
<html>
  <head></head>
  <body>
    <table>
      <tr class="topLevelRow">
        <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>
    </table>
    <!-- Break table here and start new one -->
    <table>
      <tr class="topLevelRow">
        <td rowspan="5">2</td>
        <td rowspan="5">Text 2</td>
        <td>Sub A 1</td>
        <td rowspan="1">Sub B 1</td>
      </tr>
      <tr><td rowspan="1">Sub A 2</td><td rowspan="1">Sub B 2</td></tr>
      <tr><td rowspan="1">Sub A 3</td><td rowspan="1">Sub B 3</td></tr>
      <tr><td rowspan="1">Sub A 4</td><td rowspan="1">Sub B 4</td></tr>
      <tr><td rowspan="1">Sub A 5</td><td rowspan="1">Sub B 5</td></tr>
    </table>
  </body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to move the numerical range value into a span element?

How can I implement the "update" function to retrieve the current slider value and transfer it to a Meter element with the message "Value: [current value]". The indicator color should be #ffff00 if the current value is at least 85, otherwise, it should b ...

javascripthtmlcssrange

Browse through webpages without the need to refresh them

Is there a way to implement a navigation menu that allows seamless webpage transitions without having to refresh the entire site? For instance, when a user clicks on "Info," the Info page should appear while the homepage or Contact page disappears. <na ...

javascripthtmlcss

Tips for customizing the appearance of a label when a MUI Radio Button is selected

Hello everyone, I am attempting to customize the label text color of a radio button to turn blue when selected. https://i.stack.imgur.com/btSc2.jpg HERE IS THE CODE FOR MY MUI BUTTON SO FAR import * as React from "react"; import Radio from &quo ...

javascriptcssreactjstypescriptmaterial-ui

Steps for highlighting specific character(s) within a textarea

I am working on a program to search for specific characters within a designated <textarea> element. I want to be able to highlight or color the characters that match the search criteria within the text area. How can I achieve this effect and color th ...

javascriptjquerycsstextarea

Text alignment post-rotation

Whenever I rotate a span, the text inside does not align horizontally. As shown in the example below, we are facing alignment issues with three rotated spans. body{ padding-left:10px; } .bordered{ border-left: 2px solid gray; position: relative ...

htmlcss

How to incorporate an SVG line between two divs within a flexbox arrangement

<div class='container'> <div class='Greeting'> Hello there this is B </div> <div class='banana'> Hello B </div> </div> .container{ display: flex; width: 100%; ...

htmlcssreactjs

Issue with background color not being displayed in print preview on Internet Explorer

How can I ensure that IE will display the circles when printing? I am currently using this code: <li ng-repeat="items in ferdigheter">{{ items.title}} <div class="circles"> <div class="circle" ng-repeat="a in thisnumber(items.stars)"&g ...

htmlcssangularjsinternet-explorerprinting

What factors does YouTube take into consideration when determining the dimensions for the generated iframe code?

Currently, I am working on a feature that allows our users to embed videos on their websites using iframe code. I want this feature to function similar to how YouTube handles it. However, I'm facing an issue where the iframe size generated by YouTube ...

htmliframe

Middle-Click JavaScript Action

On the website I'm currently working on, there is a button that uses a sprite sheet animation and therefore needs to be set as a background image. I want the button to have a slight delay when clicked, so the animation can play before redirecting to a ...

javascriptjqueryhtmlhrefsprite-sheet

How can I maintain the hover color on a button with a text label even when hovering over the text label?

I need help creating a button with a text label that both respond to clicks and have a hover color. The current code I have works, but the hover color is lost when hovering over the text label. How can I modify the code to maintain the hover color even w ...

javascriptcsssvgd3.js

Paper.js: Is there a way to prevent canvas height and width from changing when the window is resized?

My canvas with paperjs is set up to resize dynamically when the window is resized. I appreciate any help in advance. HTML <canvas id="myCanvas" height="800" width="1000"></canvas> JS var Initialize = function () { var canvas = document ...

javascripthtmlcanvaspaperjs

Updating image attributes using jQuery within an .each loop

My challenge involves a textarea where I paste HTML code, followed by a button that should display all the images from that code along with their respective alt text and titles. The goal is to easily update the alt text and titles for each image individual ...

javascriptjqueryhtml

The descendant selector in CSS fails to apply changes to the element

I am struggling to modify the border of a specific descendant element and so far I have not been successful. Despite using the correct descendant selector in the HTML below, the style change is not taking effect. If anyone has any insights on what could be ...

htmlcss

Troubleshooting z-index problem with background image and parent tag of image

I seem to be facing an issue with the z-index property. Here is the code snippet in question: <div id="sidebarCont"> <div id="avatarCont" class="mask"> <img id="" class="" src="img.jpg" alt=""/> </div> And here is the correspo ...

css

Creating an HTML table from a JSON file: Step-by-step guide

I am trying to create a code snippet that populates a table with data from specified .json files in the 'tracks' folder. The JSON file format looks like this: { "EndTime": "11:00", "Person": [ { ...

javascripthtmlnode.jsjsonwebpack

Adding JavaScript to dynamically loaded AJAX content

I'm new to AJAX and JavaScript and unsure of how to get it working. Here is the website: When you click on portfolio images, the details load via AJAX. I want to create a slideshow for projects with multiple full-sized images. However, due to the co ...

javascriptjqueryhtmlajaxwordpress

There appears to be an issue with the dynamic functionality of RouterLink in Angular 6

user-dashboard.html <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link" routerLink='/dashboard'>User Dashboard</a> </li> <li class="nav-item" *ngFor="let cat of categories; let i = in ...

htmlangulartypescript

Ways to apply the jQuery .on() method using vanilla JavaScript and document query selectors

How can we achieve the functionality provided by jQuery's on() function – allowing DOM events to trigger on elements that might be added in the future – using plain JavaScript? Specifically, how can we handle a mouseenter event on elements with a ...

javascripthtmljquerydom-eventsmouseevent

What is the best way to blend the color of element 1 with the color of the body or element 2?

I am trying to overlay another element on top of the body tag in my HTML, which has already been assigned a color. I have experimented with using position relative and absolute along with z-index but haven't found a solution yet. Here's how I&ap ...

htmlcss