When the cursor is positioned between two cells in a table, the CSS hover effect does not extend to the tbody and tr hover effects as expected

I've implemented this combination of HTML and CSS to generate a table with grouped rows where both the group and individual rows respond to hover events:

.c-table-display {
  border-spacing: 1px;
  border-bottom: 1px solid #dedede;
  width: 100%;
}

.c-table-display__row-odd {
  background-color: #f3f7fc;
  color: #263340;
  font-size: 12px;
  font-weight: normal;
  height: 20px;
  text-align: left;
}

.c-table-display__row-odd>td {
  vertical-align: middle;
  padding: 0 4px;
}

.c-table-display__row-even {
  background-color: #deecf8;
  color: #263340;
  font-size: 12px;
  font-weight: normal;
  height: 20px;
  text-align: left;
}

.c-table-display__row-even>td {
  vertical-align: middle;
  padding: 0 4px;
}

.c-table-display__body--highlightable:hover tr {
  cursor: pointer;
  background: #E3EBDE;
}

tr.c-table-display__row--highlightable:hover {
  background: #FFE56F;
  cursor: pointer;
}

.c-table-display__body--highlightable:hover td {
  vertical-align: middle;
  padding: 0 4px;
}

.c-table-display__row--highlightabe:hover td {
  vertical-align: middle;
  padding: 0 4px;
}

.c-table-display__cell--icon {
  text-align: center;
}

.c-table-display__cell--icon>img {
  vertical-align: middle;
}
<table class="u-width-full c-table-display">
  <tbody class="c-table-display__body c-table-display__body--highlightable">
    <tr class="c-table-display__row-odd c-table-display__row c-table-display__row--highlightable js-machine-param-row" machinerowid="17" parameterrowid="102">
      <td>'test</td>
      <td title="unique">
        unique
      </td>
      <td title="">

      </td>
      <td title="">

      </td>
      <td class="c-table-display__cell c-table-display__cell--icon">

      </td>
      <td class="c-table-display__cell c-table-display__cell--icon">

      </td>
      <td class="c-table-display__cell c-table-display__cell--icon">

      </td>
    </tr>
    <tr class="c-table-display__row-even c-table-display__row c-table-display__row--highlightable js-machine-param-row" machinerowid="17" parameterrowid="113">
      <td title="keykeykeyke..... (content omitted for brevity)
            </td>
      <td title="valuevaluev... (content omitted for brevity)
            </td>
      <td title="keykeyk....</td>
      <td class="c-table-display__cell c-table-display__cell--icon">

      </td>
      <td class="c-table-display__cell c-table-display__cell--icon">

      </td>
      <td class="c-table-display__cell c-table-display__cell--icon">

      </td>
    </tr>
  </tbody>
</table>

The issue I'm encountering is that when hovering over the space between two cells, neither the row nor the group receives the hover effect. Is there a solution to address this without removing the border-spacing? I prefer not to rely on Javascript due to past issues with lingering hover effects caused by a previous Javascript implementation.

htmlcsshover

Answer №1

.c-table-display {
  //border-spacing: 1px;
  border-bottom: 1px solid #dedede;
  width: 100%;
}

.c-table-display__row-odd {
  background-color: #f3f7fc;
  color: #263340;
  font-size: 12px;
  font-weight: normal;
  height: 20px;
  text-align: left;
}

.c-table-display__row-odd>td {
  vertical-align: middle;
  padding: 0 4px;
  border: 1px solid white;
}

.c-table-display__row-even {
  background-color: #deecf8;
  color: #263340;
  font-size: 12px;
  font-weight: normal;
  height: 20px;
  text-align: left;
}

.c-table-display__row-even>td {
  vertical-align: middle;
  padding: 0 4px;
  border: 1px solid white;
}

.c-table-display__body--highlightable:hover tr {
  cursor: pointer;
  background: #E3EBDE;
}

tr.c-table-display__row--highlightable:hover {
  background: #FFE56F;
  cursor: pointer;
}

.c-table-display__body--highlightable:hover td {
  vertical-align: middle;
  padding: 0 4px;
}

.c-table-display__row--highlightabe:hover td {
  vertical-align: middle;
  padding: 0 4px;
}

.c-table-display__cell--icon {
  text-align: center;
}

.c-table-display__cell--icon>img {
  vertical-align: middle;
}
<table cellspacing="0" cellpadding="0" class="u-width-full c-table-display">
  <tbody class="c-table-display__body c-table-display__body--highlightable">
    <tr class="c-table-display__row-odd c-table-display__row c-table-display__row--highlightable js-machine-param-row change" machinerowid="17" parameterrowid="102">
      <td>'test</td>
      <td title="unique">
        unique
      </td>
      <td title="">

      </td>
      <td title="">

      </td>
      <td class="c-table-display__cell c-table-display__cell--icon">

      </td>
      <td class="c-table-display__cell c-table-display__cell--icon">

      </td>
      <td class="c-table-display__cell c-table-display__cell--icon">

      </td>
    </tr>
    <tr class="c-table-display__row-even c-table-display__row c-table-display__row--highlightable js-machine-param-row" machinerowid="17" parameterrowid="113">
      <td title="keykeykeykeykeykeykeykeykey... (remaining text truncated for brevity)"
      ...

you can remove and cell spacing and add border for spacing on td now just set border top bottom properties for first and last child and you are good to go.

Ping me if you have any query.

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 troubleshoot an unresponsive button element to determine the listeners it has?

In a previous situation, I encountered an issue with the event modifier of a nested b-input not working as expected. To resolve this, I had to add .native because I was interacting with a component: b-dropdown(text="Actions") b-drop ...

javascripthtmlvue.jsgoogle-chrome-devtools

Incorporate a click function onto the image within the canvas

After creating a canvas and placing an image on it, I realized that I need to include a click event for that image. Below is the code snippet I have written in attempt to achieve this. <canvas id="myCanvas" width="578" height="1000"></canvas> ...

javascripthtmlcanvashtml5-canvas

Grid system not being followed by table in Bootstrap layout

I'm struggling to figure out why the table I have doesn't follow Bootstrap's grid system. It took me a good 2 hours to pinpoint and fix the issue. Any help would be greatly appreciated. I could share the code, but it might be easier for you ...

htmlcsstwitter-bootstrap

The checkboxes do not appear to be updating visually when the "checked" property is toggled programmatically

Check out this example on JSFiddle for a demonstration. Clicking on a checkbox should cause all the neighboring checkboxes to toggle on or off. Even though the "checked" property is toggling, there doesn't seem to be any visual change. n.prop("chec ...

javascriptjqueryhtmlcss

Is Html.Raw necessary for handling ragged html generated by Razor?

When it comes to generating HTML in a dynamic grid model using Razor, the following code snippet is often used: @{ int blockCounter = 0;} @foreach (var item in Model.Items) { if (blockCounter++ % 3 == 0) { //ragged html open here, when needed ...

htmlrazorhtml-helperrazor-2

Tips for showing multiple autocomplete entries in a text box following a successful AJAX request

I'm having an issue with my code where the autocomplete multiple values, successfully retrieved by Ajax, are not being displayed. Here is the HTML I am using for display: <input type="text" name="s_to" id="s_to" class="controls"> Here is my jQ ...

javascriptphpjquerycssajax

Position dropdown elements using absolute alignment

I am attempting to replicate the drop-down menu style used on Twitter. Here is an example of what I am trying to achieve: (Click on the language option). To accomplish this, I have implemented the following HTML: <a href="#language">English</a ...

jquerycss

Designing a rounded border radius for various child elements within a layout

I am currently working on creating a circular container that houses an image and a description overlaid at 50% opacity. Here is what I have achieved so far: https://i.stack.imgur.com/pIkO1.png My goal is to apply a uniform border-radius to the entire div ...

htmlcssreactjs

What is causing this animation to malfunction?

Could someone assist me in hiding this div-container for a brief period of 2 seconds? If you have any alternative suggestions, feel free to share them but, please refrain from using jQuery or JavaScript. #vcontainer { height: 450px; width: 100%; ba ...

htmlcssjquery-animatekeyframe

Encountering difficulties with saving form data to a MySQL database in a Spring Boot Thymeleaf application

After creating a simple CRUD functionality using Spring Boot and Thymeleaf, I encountered an issue where the form was not saving values to the database upon submission. Below is my controller: @Controller public class ClientController { private stat ...

htmlmysqlspringspring-bootspring-data

The navigation icon on my website refuses to close

Hey there, I'm having some trouble creating a side navigation menu. The issue I am facing is that the menu opens without any problem, but then I can't seem to figure out how to close it using a second "onclick()" function. If you could take a lo ...

javascripthtmlcss

What is the proper way to justify text alignment in HTML?

I want to align the text to the right like the first row, but the second row keeps overflowing below the image. How can I ensure that the text is properly aligned regardless of the number of rows? <a href="javascript:;" id="A_3"><i id="I_4">&l ...

htmlcssalignment

Utilizing Jquery for draggable/droppable functionality in combination with custom overflow styles

Encountering a challenge with a drag and drop system that utilizes CSS overflow properties to enable vertical scrolling of a list of values. The issue arises when dragging an item between selected and unselected areas, causing the dragged item to disappear ...

jquerycssjquery-uidrag-and-drop

Switching from HTML to PHP programming

Trying to build a website from scratch and incorporate a form has been challenging. My goal is for the Submit button to send an email without launching any email program, but I'm facing redirection issues. Despite searching on Google for solutions, I ...

phphtmlhttp-redirect

prettyPhoto popup exceeds maximum width and height limitations

I am currently using the most up-to-date version from No Margin for Errors and I have set allow_resize to true. However, the size of the display is still too large. Is there a way to set a maximum width/height? I have already configured the viewport as fo ...

javascriptjqueryhtmlcssprettyphoto

Make the select box stay in place as it is created from an array

I have been utilizing an array to generate a select box and it's functioning as expected. However, I am looking to make this select box "sticky," meaning I want the HTML form to retain the previously filled out values. Although I inserted the code in ...

phphtml

How to align content within a FormControlLabel using Material UI

My goal is to line up the label and radio button inside a FormControlLabel component so that the label occupies the same width regardless of its content. The current appearance can be seen below: https://i.stack.imgur.com/GhXed.png Below is the code I am ...

cssreactjsmaterial-ui

Enlarge the size of checkboxes on Phonegap for Android

I'm currently working on a quiz application using Phonegap, incorporating HTML, JavaScript, and CSS without any additional frameworks. My problem lies in the fact that the checkboxes appear too small on Android devices. I attempted to adjust the width ...

javascriptandroidhtmlcsscordova

utilizing AJAX in PHP for a dynamic selection process with MariaDB

I am working on a dynamic select feature using AJAX, PHP, and queries to a database. There are three main components involved in this process: the HTML where the select options are populated from database queries done through AJAX, the PHP scripts that han ...

javascriptphpjqueryhtmlajax

retrieving data entered in an HTML form using PHP script

Just dipping my toes into the world of php/html and I'm facing an issue where I need to extract a value from an html form and assign it as a variable in an external php script. This variable is essential for running a SQL query in a postgres database ...

phpjqueryhtml