Creating a table with highlighted rows and columns that span multiple rows can be

I am facing an issue with highlighting rows in a table that contains rowspan elements. Here is the HTML code:

<table width="800" cellpadding="5" border="1">
   <tr class="head">
       <th>NO.</th>
       <th>FOOD NAME</th>
       <th>TYPE</th>
       <th>STATUS</th>
   </tr>
   <tr class='row'>
        <td rowspan='2' align='center'>1.</td>
        <td rowspan='2'>Mozarella Cheese</td>
        <td>Regular</td>
        <td rowspan='2' align='center'>Available</td>
   </tr>
   <tr class='row'>
        <td>Premium</td>
   </tr>
   <tr class='row'>
        <td rowspan='2' align='center'>2.</td>
        <td rowspan='2'>Greentea Milk</td>
        <td>Regular</td>
        <td rowspan='2' align='center'>Available</td>
   </tr>
   <tr class='row'>
        <td>Premium</td>
   </tr>
</table>

Additionally, here is my CSS code for styling the table:

.head {
   background: rgb(206,220,231); 
   /* Other background properties */
}

.head th {
    padding:10px;
    color:#333;
    text-shadow:1px 1px 0px #CCC;
    font-size:14px;
}

.row {
    background-color:#E0E0E0;
    font-size:12px;
 }

.row:hover td[rowspan] {
    background: #00FF33;
    font-weight:bold;
    cursor:pointer;
}
.row:hover td[rowspan]:hover ~ tr {
    background: #00FF33;
    font-weight:bold;
    cursor:pointer;
}

I need help in resolving the issue of highlighting rows in a table with rowspan elements. The current CSS code doesn't seem to work well due to the presence of rowspan. Any suggestions on how to achieve highlighted rows in this scenario?

csshtml-tablehighlight

Answer №1

To enhance the appearance of the "Premium" cells, you may apply a special hook class similar to your example and target them within the main .row:hover state.

Furthermore, the td[rowspan] part is unnecessary.

Take a look at the following code snippet:

.head {
   background: rgb(206,220,231); 
   background: -moz-linear-gradient(top,  rgba(206,220,231,1) 0%, rgba(89,106,114,1) 100%); 
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(206,220,231,1)), color-stop(100%,rgba(89,106,114,1))); 
   background: -webkit-linear-gradient(top,  rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%); 
   background: -o-linear-gradient(top,  rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%); 
   background: -ms-linear-gradient(top,  rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%); 
   background: linear-gradient(to bottom,  rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%); 
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cedce7', endColorstr='#596a72',GradientType=0 );}

.head th {
    padding:10px;
    color:#333;
    text-shadow:1px 1px 0px #CCC;
    font-size:14px;
}

.row {
    background-color:#E0E0E0;
    font-size:12px;
 }

.row:hover td, .row:hover + .premium td {
    background: #00FF33;
    font-weight:bold;
    cursor:pointer;
}
.row:hover td:hover ~ tr {
    background: #00FF33;
    font-weight:bold;
    cursor:pointer;
}
<table width="800" cellpadding="5" border="1">
   <tr class="head">
       <th>NO.</th>
       <th>FOOD NAME</th>
       <th>TYPE</th>
       <th>STATUS</th>
   </tr>
   <tr class='row'>
        <td rowspan='2' align='center'>1.</td>
        <td rowspan='2'>Mozarella Cheese</td>
        <td>Regular</td>
        <td rowspan='2' align='center'>Available</td>
   </tr>
   <tr class='row premium'>
        <td>Premium</td>
   </tr>
   <tr class='row'>
        <td rowspan='2' align='center'>2.</td>
        <td rowspan='2'>Greentea Milk</td>
        <td>Regular</td>
        <td rowspan='2' align='center'>Available</td>
   </tr>
   <tr class='row premium'>
        <td>Premium</td>
   </tr>
</table>

For better maintainability, it might be worthwhile to reconsider the markup structure, although the current setup can certainly function as demonstrated.

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 causing my basic HTML/CSS Media Queries and child box positions to not function properly?

Hey there, I'm diving into the world of programming languages like CSS and looking for a little guidance. I've been troubleshooting my code for more than 24 hours now and need some fresh eyes to help me out with a couple of issues I can't se ...

htmlcssmedia-queriesmultiple-columns

Running the gulp uncss command with regex to ignore specific elements is not functioning as expected

I have been attempting to integrate uncss into my gulp workflow. In order to exclude certain classes, such as those added through javascript, I am specifying these classes with "ignore" (specifically, I am trying to remove the css from the jquery plugin m ...

javascriptcssgulpuncss

Organizing component order based on screen size with React and TailwindCSS

Utilizing React alongside Tailwind CSS, I am looking to dynamically render and reorder components based on screen size. For example, displaying the following order on mobile: <div1 /> <div2 /> <div3 /> And on desktop: <div3 /> < ...

cssreactjstypescriptreact-hookstailwind-css

Creating an HTML table with collapsed borders and hidden rows/columns using the `border-collapse

I am facing a situation where I have a table with multiple lines as shown below: <table> <tr id="line1"><td>Line</td><td>1</td></tr> <tr id="line2"><td>Line</td><td>2</td></t ...

javascriptcsshtml-table

Utilizing an Asterisk/Wildcard in the Name of a CSS Selector

Have you ever encountered an advanced CSS rule that utilizes an asterisk in the selector name? I am currently working with Bootstrap and have multiple divs nested within a parent div like this: <div class="example"> <div class="col-sm-1"> ...

csstwitter-bootstrapcss-selectors

The div height adjustment peculiarities in IE7 and IE8 are causing quite a stir

I recently encountered a problem with my HTML/JS code that I thought was simple. The code is designed to expand the size of a div on mouseover and then collapse it back on mouseout. Here's how the code looks: CSS: .sign-in-up { position: absolut ...

javascripthtmlcssinternet-explorer-8internet-explorer-7

Ensure that the container div is filled by the image if the image exceeds the dimensions of

I have a footer menu with a background image that is larger than the div itself (2000x168). Even though I have set the width to 100%, it seems like the whole image isn't displaying. Instead, only a portion of it is visible, matching the size of my sc ...

htmlcssbackground

The alignment of an image within a bootstrap table cell may not appear centered

I am struggling to center an image in a table cell that is wider than the image itself. I have tried using the text-center and align-middle classes in Bootstrap, but the image remains on the left side of the cell. Since I am new to Bootstrap, I am not fa ...

htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Hiding elements in HTML with React when data is null

Is there a way to hide elements using classes like "d-none" when the data is null in React? <span className="product__tag">{prod.tag1}</span> <span className="product__tag">{prod.tag2}</span> <span classN ...

javascripthtmlcssreactjs

Looking for assistance with parsing football league standings from a website using PHP

Is there a way to use PHP to extract an HTML table from a website? References: The table I want to parse can be found here: This is the code I attempted to use: <div class="row"> <div class="col-md-8"> <h1>Standings</h1 ...

phphtmldomweb-scrapinghtml-table

Troubles with z-index implementation in HTML

Seeking guidance on an html page containing a dropdown menu with z-index positioning, set absolutely with specific left and top values. The issue arises when the window is resized, causing the dropdown menu to shift position awkwardly. This problem seems t ...

htmlcssz-index

Tips for getting the DIV:hover effect to work in Internet Explorer 8

Can someone provide me with the steps to get DIV:Hover functioning in Internet Explorer 8? ...

htmlcss

Display an image when the iframe viewport is reduced in size by utilizing media queries

I am looking to showcase a demo.html page within a 400px square iframe. When the viewport is smaller than 400px, I want demo.html to only display an image. Then, when clicking on that image in demo.html, the same page should switch to fullscreen mode. Sim ...

javascripthtmlcss

CSS - Maximizing the effectiveness of position:absolute by optimizing for specific screen sizes

With a body width of 800px: body { width:800px; margin:15px auto;} A <div> area (100x200px) is intended to be positioned in the TOP RIGHT corner of the body, regardless of screen size or browser. The code attempted is as follows: #login-hover-cont ...

htmlcss

Combining Columns into Rows in an HTML Table

Utilizing Rowspan and Colspan to Construct HTML Tables. I am looking to have the first five columns in a single row with no data, as illustrated in the editable image. This can be done using rowspan or colspan. The last two columns should remain unchange ...

htmlasp.net-mvchtml-tablebootstrap-4

Is it possible for me to create a Pomodoro clock similar to this one?

Can you provide guidance on creating a Pomodoro clock similar to this design: https://i.sstatic.net/qhd1Z.png As time progresses, the arrow should move around causing the circumference of the circle to increase. What approach or library would you recomm ...

javascriptjqueryhtmlcss

Tips for styling <asp:Menu> to resemble a bootstrap navbar

Currently, I am in the process of developing an ASP.Net application and have set up a Bootstrap navbar in my Site.Master file as shown below: <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div clas ...

cssasp.nettwitter-bootstrapnavbarsitemapprovider

Create a string of text that aligns to the left and then to the right

After spending the entire day attempting to make this work, I'm starting to doubt if it's even achievable.. The goal is for the word "Sugar" to expand to the left and then fill up before moving to the right when a longer string of text is entere ...

htmlcss

Which specific divs should I assign an ID to within the class?

Is there a way to apply the gray box style to specific divs instead of all of them? Should I include an id somewhere in the code? <!DOCTYPE html> <html> <head> <style> div { width: 320px; padding: 10px; border: 5px soli ...

htmlcss

Developing two HTML tables utilizing JavaScript

I've encountered an issue while trying to generate 2 dynamic html tables using JavaScript with data from HTML inputs. Successfully creating the first table, I faced difficulties in creating another table utilizing different input fields on the same pa ...

javascripthtmlcss