When hovering over the alternating rows of a table, the shadow effect does not appear

I'm encountering an issue with CSS. I have a table and when hovering on the table's tr, there's a CSS property for box-shadow. The problem is that this box-shadow isn't fully visible for the even rows.

https://i.sstatic.net/9uSjO.png

The bottom part of the box-shadow remains hidden due to the next td element. It works fine for odd rows.

Here is the link to the code sandbox illustrating the issue: link.

I've attempted using position relative and z-index, but it hasn't solved the problem for me. Any suggestions?

htmlcss

Answer №1

Opt for using drop-shadow over box-shadow. For instance:

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:hover {
  filter: drop-shadow(0 0 0.275rem rgba(255, 0, 0, 0.75));
}

tr:nth-child(even) {
  background-color: #dddddd;
}

tr:nth-child(odd) {
  background-color: #ffffff;
}
<h2>HTML Table</h2>

<h4>
  Onmouseover on the even row the box shadow is not completely visible
</h4>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

Answer №2

To ensure full visibility of the box shadow, add position: relative; to the tr element

table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
      }

      td,
      th {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 8px;
      }

      tr:hover {
        box-shadow: 0 0 10px 3px rgba(255, 0, 0, 0.5);
        
      }
/*change here*/
      tr:nth-child(even) td {
    background-color: #dddddd;
    position: relative;
    z-index: -1;
    }
    <h2>HTML Table</h2>;

    <h4>
      When hovering over the even rows, the box shadow may not be fully visible due to stacking order
    </h4>

    <table>
      <tbody><tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
      </tr>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
      </tr>
      <tr>
        <td>Ernst Handel</td>
        <td>Roland Mendel</td>
        <td>Austria</td>
      </tr>
      <tr>
        <td>Island Trading</td>
        <td>Helen Bennett</td>
        <td>UK</td>
      </tr>
      <tr>
        <td>Laughing Bacchus Winecellars</td>
        <td>Yoshi Tannamuri</td>
        <td>Canada</td>
      </tr>
      <tr>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
      </tr>
    </tbody></table>

Answer №3

remove this styling

tr:nth-child(even) {
    background-color: #dddddd;
 }

By removing this particular style, it should function correctly

table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
      }

      td,
      th {
        text-align: left;
        padding: 8px;
      }

      tr:hover {
        box-shadow: 0 0 10px 3px rgba(255, 0, 0, 0.5);
        position: relative;
      }

tr:nth-child(even) { 
   background-color: #dddddd; 
}
      tr:hover {
  box-shadow: 0 0 10px 3px rgba(255, 0, 0, 0.5);
  position: relative;
}
table {
  border-collapse: separate;
    border-spacing: 0px 8px;
}
<!DOCTYPE html>
<html>
  <head>

  </head>
  <body>
    <h2>HTML Table</h2>

    <h4>
      Onmouseover on the even row the box shadow is not completely visible
    </h4>

    <table>
      <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
      </tr>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
      </tr>
      <tr>
        <td>Ernst Handel</td>
        <td>Roland Mendel</td>
        <td>Austria</td>
      </tr>
      <tr>
        <td>Island Trading</td>
        <td>Helen Bennett</td>
        <td>UK</td>
      </tr>
      <tr>
        <td>Laughing Bacchus Winecellars</td>
        <td>Yoshi Tannamuri</td>
        <td>Canada</td>
      </tr>
      <tr>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
      </tr>
    </table>
  </body>
</html>

Answer №4

Give this a shot,

Initial Approach

Insert position:relative into tr:hover{...} with z-index:2.

Additionally, include position:relative in tr td{...} with z-index:1.

This will be the result

tr:hover {
  box-shadow: 0 0 10px 3px rgba(255, 0, 0, 0.5);
  -moz-box-shadow: 0 0 10px 3px rgba(255, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 10px 3px rgba(255, 0, 0, 0.5);
  position: relative;
  z-index:2;
}
tr td{
  position: relative;
  z-index:1;
}

See it in action 

tr:hover {
  box-shadow: 0 0 10px 3px rgba(255, 0, 0, 0.5);
  -moz-box-shadow: 0 0 10px 3px rgba(255, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 10px 3px rgba(255, 0, 0, 0.5);
  position: relative;
  z-index:2;
}
tr td{
  position: relative;
  z-index:1;
}
<!DOCTYPE html>
<html>
  <head>
    <style>
      table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
      }

      td,
      th {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 8px;
      }
      
      tr:hover {
        box-shadow: 0 0 10px 3px rgba(255, 0, 0, 0.5);
      }

      tr:nth-child(even) {
        background-color: #dddddd;
      }
    </style>
  </head>
  <body>
    <h2>HTML Table</h2>

    <h4>
      Onmouseover on the even row the box shadow is not completely visible
    </h4>

    <table>
       ... (Table content here)
    </table>
  </body>
</html>

Alternative Technique

Utilize box-shadow as inset

  box-shadow: inset 0 0 10px 3px rgba(255, 0, 0, 0.5);


tr:hover {
  box-shadow: inset 0 0 10px 3px rgba(255, 0, 0, 0.5);
  -moz-box-shadow: inset 0 0 10px 3px rgba(255, 0, 0, 0.5);
  -webkit-box-shadow: inset 0 0 10px 3px rgba(255, 0, 0, 0.5);
}
<!DOCTYPE html>
<html>
  <head>
    <style>
      table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
      }

      td,
      th {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 8px;
      }
      
      tr:nth-child(even) {
        background-color: #dddddd;
      }
    </style>
  </head>
  <body>
    <h2>HTML Table</h2>

    <h4>
      Onmouseover on the even row the box shadow is not completely visible
    </h4>

    <table>
       ... (Table content here)
    </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

Is there a way in Material UI to dynamically update the border color of a TextField once the user inputs text?

Is there a way to style the border of a TextField only when it has text input? I am currently using the outlined version of the TextField, which displays placeholder text when empty. <TextField variant="outlined" /> So far, I have managed ...

cssreactjsmaterial-ui

Display a fancy slideshow that transitions to five new images when the last one is reached

Here is a screenshot of my issue: https://i.stack.imgur.com/duhzn.png Incorporating Bootstrap 3 and FancyBox, I am facing an issue with displaying images in rows. When I reach the last image, clicking on the right arrow should result in sliding to anothe ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is there a way to display a message in a div container instead of using the alert box when there is a successful ajax response?

Hey there, I'm currently working on implementing error validation handling for a custom form that I've created. I'm looking to display the error messages in a designated div rather than using the standard browser alert box. Since I'm fa ...

javascriptphphtmljqueryajax

Developing a jsp page with interconnected drop down menus

I am looking to dynamically populate the options in a second drop-down based on the selection made in the first drop-down. For instance, if I have a first drop-down with options {India, South Africa, USA}, and I choose India, then the second drop-down shou ...

javascriptjqueryhtmlajax

scrolling smoothly to a specific div on another webpage

Incorporating a smooth scrolling feature on my website's menu bar has been quite challenging. Specifically, I want the page to redirect to another HTML page and smoothly scroll to a specific div when a sub-item is clicked. To achieve smooth scrolling ...

jqueryhtmlsmooth-scrolling

What is the process for designing a menu with animated scaling effects?

I have a design file in PSD format that looks like this. https://i.sstatic.net/R46Ko.jpg My goal is to create a website similar to , where when a user hovers over a link, a circle will appear around it. I am using Bootstrap 4.5 for this project. Here is ...

htmlcssbootstrap-4

Placing an image above text in a table cell and making it hover

Is there a way to display an icon on the right-hand side of a table cell using jQuery? I want it to overlap the td contents if necessary. I've searched for solutions online but haven't found anything helpful yet. My main concern is styling rathe ...

jqueryhtmlcss

Transitioning Dropdowns in Angular UI Bootstrap

Hello everyone, I am completely new to both Stack Overflow and AngularJS. I'm attempting to incorporate a fade-in animation into my dropdown (using UI Bootstrap's dropdown directive) without success. This issue is quite similar to the following ...

cssangularjsangular-ui-bootstrap

jQuery does not support CSS pseudo-code

I'm having trouble with my CSS pseudo-code not being recognized by jQuery. Here is the code I'm using: CSS: h1 { background: red; width: 100px; display: inline-block; } h1:after { content:" | "; background:blue; display ...

jquerycss

How can I add text to an HTML5 SVG similar to using the HTML5 <p> tag?

I am currently working on creating dynamic rectangular boxes and I am facing some difficulties with inserting text into the shapes. The SVG text requires setting x and y coordinates in separate text tags, and doesn't have built-in width and height pro ...

javascriptcsshtmljquery-pluginssvg

The height of the ReactPlayer dynamically adjusts to accommodate content beyond the boundaries of the page

I have a video on my webpage that I want to take up the entire screen, but currently, users have to scroll a bit to reach the bottom, which is not ideal. This is my JavaScript: <div id="page"> <div id="video-container"> ...

javascriptcssreactjsreact-player

When attempting to click on my subtopics using jQuery, they do not appear as expected

$(document).ready(function () { $("#subTopics").hide(); $("#mainTopics").click(function () { $("#subTopics").show("slow"); }); }); body { margin: 0; } li, a{ text-decoration: none; list-style-type: none; text-d ...

javascriptjqueryhtmlcss

User Agent Stylesheets do not take effect

https://i.sstatic.net/UXF3l.png Currently, I am working on a simple unordered list project where I am utilizing Material UI. However, there seems to be an issue that I would like some help with. (user agent) html.css The CSS includes the property padd ...

htmlcssmaterial-uiuser-agent

The functionality of resizing a layout in Html5/CSS3 is not functioning correctly

Whenever I resize the window, I am looking to have A B C displayed one after the other in a vertical sequence, I have been struggling with this for quite some time. Can someone please help me figure out how to achieve this? Thank you! A B C div#me ...

htmlcss

Difficulty with Line Breaks in Spans

I've noticed that my multi-line address in the footer is not breaking correctly at certain screen widths. Each line of the address is enclosed within a <span> tag with a specific class and then styled either as block or inline-block in the CSS ...

htmlcss

"Interactive table feature allowing for scrolling, with anchored headers and columns, as well as the option to fix

I'm in need of a table that has certain requirements, as shown in the image. https://i.stack.imgur.com/Z6DMx.png The specific criteria include: The header row (initially blurred) should remain fixed when scrolling down the table The first column s ...

javascripthtmlreactjsscrollposition

Which specific CSS attributes should be applied to create a scroll bar within this table?

Below is the table that I am working with: 'table' I want to ensure that its width remains the same even when the screen size is reduced, and only add a scroll bar to view it. I have already included overflow: scroll; in the container <div> ...

htmlcsshtml-tablescroll

What is the best way to save a JavaScript array in HTML5 local storage?

I am looking for a way to store an array of inputs using the local storage feature of HTML5. Currently, I am able to add weight inputs to the array, but they disappear once I refresh the page. Can anyone assist me with this? <!DOCTYPE html> <html ...

javascriptarrayshtmllocal-storage

Can the data cells of columns be dynamically adjusted to align them on a single vertical line?

For some time now, I have been grappling with a CSS issue. I am working with a table that has 3 columns displaying departures, times, and situational text for scenarios like delays or cancellations. However, as evident from the images, the alignment of th ...

cssreactjstypescriptsass

The concept of CSS inheritance within div elements

I've been researching extensively about the concept of CSS inheritance, but I have come across a puzzling question that remains unanswered. Consider the code snippet below: <!DOCTYPE HTML> <html> <head> <style type="text/css"> ...

csshtmlinheritance