Changing the Color of HTML Table Borders When Hovered Over

Question

Changing the Color of HTML Table Borders When Hovered Over

How can I change the color of the top and bottom border of a tr when hovering over it? The issue I am facing is that the hover styles are being overridden by the tr above it.

In my example below, only the bottom border is highlighting on the second and third items:

table {
  border-collapse: collapse;
}

th {
  background-color: rgb(231, 231, 231);
}

td {
  border-bottom: 2px solid rgb(214, 214, 214);
  border-top: 2px solid rgb(214, 214, 214);
}

table tr:hover td {
  border-bottom: 2px solid red;
  border-top: 2px solid red;
}

<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>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
</table>

html css

Answer 1

Answer №1

To maintain the 2 px borders, remove the collapse and border-padding. Utilize a sibling selector to modify the appropriate borders when hovered.

In the example below, a thead and tbody have been added to the table so that only the body elements will change on hover

table {
 border-spacing:0;
}

th {
  background-color: rgb(231, 231, 231);
}

td {
  border-top: 2px solid rgb(214, 214, 214); /* all cells with top border */
}

tbody tr:last-child td {
  border-bottom: 2px solid rgb(214, 214, 214);  /* last row with bottom border */ 
}

tbody tr:hover td {
  border-color: red;    /* all borders to red on hover (especially last child bottom border) */
}

tbody tr:hover + tr td {
  border-top-color: red;  /* cells without bottom border - next row with top border in red */
}

<table>
<thead>
  <tr>
    <th>COMPANY</th>
    <th>CONTACT</th>
    <th>COUNTRY</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
</tbody>
</table>

Answer 2

To maintain the 2 px borders, remove the collapse and border-padding. Utilize a sibling selector to modify the appropriate borders when hovered.

In the example below, a thead and tbody have been added to the table so that only the body elements will change on hover

table {
 border-spacing:0;
}

th {
  background-color: rgb(231, 231, 231);
}

td {
  border-top: 2px solid rgb(214, 214, 214); /* all cells with top border */
}

tbody tr:last-child td {
  border-bottom: 2px solid rgb(214, 214, 214);  /* last row with bottom border */ 
}

tbody tr:hover td {
  border-color: red;    /* all borders to red on hover (especially last child bottom border) */
}

tbody tr:hover + tr td {
  border-top-color: red;  /* cells without bottom border - next row with top border in red */
}

<table>
<thead>
  <tr>
    <th>COMPANY</th>
    <th>CONTACT</th>
    <th>COUNTRY</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
</tbody>
</table>

Answer 3

Answer №2

This solution is the closest alternative to using collapse, which seems to be causing the issue you mentioned.

Set border-spacing to 0;
Use border-top and border-bottom with a thickness of 1px instead of 2px

table {
   border-spacing:0;
}

th {
  background-color: rgb(231, 231, 231);
}

td {
  border-bottom: 1px solid rgb(214, 214, 214);
  border-top: 1px solid rgb(214, 214, 214);
}

table tr:hover td {
  border-bottom: 1px solid red;
  border-top: 1px solid red;
}

<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>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
</table>

Answer 4

This solution is the closest alternative to using collapse, which seems to be causing the issue you mentioned.

Set border-spacing to 0;
Use border-top and border-bottom with a thickness of 1px instead of 2px

table {
   border-spacing:0;
}

th {
  background-color: rgb(231, 231, 231);
}

td {
  border-bottom: 1px solid rgb(214, 214, 214);
  border-top: 1px solid rgb(214, 214, 214);
}

table tr:hover td {
  border-bottom: 1px solid red;
  border-top: 1px solid red;
}

<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>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
</table>

Answer 5

Answer №3

To eliminate the border-collapse: collapse; property, simply insert border-spacing:0

Answer 6

To eliminate the border-collapse: collapse; property, simply insert border-spacing:0

Answer 7

Answer №4

Consider another approach by utilizing the :before or :after pseudo-elements!

An advantage of this method is that it won't affect the box size unlike using borders.

Illustrated below is an example:

table tr {
    position: relative;
}

table tr:before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 2px;
    background: red;
}

The "content" property is essential to create the element, although the value can be empty (particularly when using it for visual purposes).

UPDATE — Don't forget about setting the hover state:

table tr:hover:before {
    background: blue;
}

REMINDER — :before is inserted immediately before the parent's content, while :after comes after (but before the parent's closing tag).

Answer 8

Consider another approach by utilizing the :before or :after pseudo-elements!

An advantage of this method is that it won't affect the box size unlike using borders.

Illustrated below is an example:

table tr {
    position: relative;
}

table tr:before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 2px;
    background: red;
}

The "content" property is essential to create the element, although the value can be empty (particularly when using it for visual purposes).

UPDATE — Don't forget about setting the hover state:

table tr:hover:before {
    background: blue;
}

REMINDER — :before is inserted immediately before the parent's content, while :after comes after (but before the parent's closing tag).

Changing the Color of HTML Table Borders When Hovered Over

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Last item in Material UI Grid container not filling up entire space

The HTML dropdown menu is malfunctioning

Why are the radio buttons not aligned with the text in the center?

Challenges in the functionality of PHP form submission utilizing GET parameters

Align labels on top and inputs at the bottom using Bootstrap

Retrieving Text from CSS Property with Selenium in Python

CSS Animation Effect on Transparent PNG Image

How can I prevent a repetitive div from appearing in a JQuery show/hide function?

Convert to cshtml and retrieve the logged-in user's identification

Using HTML and CSS, create a layout with three columns where the side columns are flexible in width and the middle

Tips for customizing the Link component in ReactJS to display innerHTML

Converting an HTML ul-li structure into a JavaScript object: Steps to save the structure

The HTML generated by Selenium using Javascript is still missing some elements, despite accessing the document.body.innerHTML

Is it possible to rotate an image with a random angle when hovering in Angular?

Ways to delete an attribute from a DOM element with Javascript

children blocking clicks on their parents' divs

HTML5 enables users to pick their preferred font style

The URL requested exceeds the maximum length limit in asp.net, causing a 414 error

Opposite of CSS Media Query in a precise manner

At times, the CSS fails to load at first and does not refresh correctly when using F5 or CTRL F5, yet it occasionally loads when clicking on links