CODEWITHSUNDEEP
htmlcss
Frank
Frank

Reputation: 2431

Coloring HTML Table Borders On Hover

I would like to have the top and bottom border of a tr to change colour when I hover over it. The problem that I am having is that the tr above the hovering one is overriding the hover styles (at least that is what I think is happening).

In my example here, the first item is hovering correctly, but in the second and third ones only the bottom border is highlighting:

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>

Upvotes: 4

Views: 3861

Answers (4)

Romain Mascia
Romain Mascia

Reputation: 41

another option "could" be to use :before or :after !

One of the main benefits is that it is not going to change the size of the box like border does.

Here is an example of it:

table tr {
    position: relative;
}

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

The "content" attribute is mandatory to be able to generate the element but the string can be empty (especially when you want to use this element as a graphic hack).

EDIT — I forgot to precise you the hover state:

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

NOTE — :before is automatically placed right before the content of the parent while :after is placed right after (before the parent's tag is closed).

Upvotes: 0

Pete
Pete

Reputation: 58432

If you want to keep your 2 px borders, you need to get rid of the collapse and then remove the border-padding. You can then use a sibling selector to change the correct borders on hover.

In the below, I have just added a thead and tbody to your table so that we know only the body elements will change when hovered

table {
 border-spacing:0;
}

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

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

tbody tr:last-child td {
  border-bottom: 2px solid rgb(214, 214, 214);  /* make the last row also have a bottom border */ 
}

tbody tr:hover td {
  border-color: red;    /* change all borders to red on hover (mainly because of the last child bottom border */
}

tbody tr:hover + tr td {
  border-top-color: red;  /* change any cells without a bottom border - make the next row have top border go red (so it looks like current row bottom border) */
}
<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>

Upvotes: 7

Deepak Singh Pawar
Deepak Singh Pawar

Reputation: 36

Just remove border-collapse: collapse; and add border-spacing:0

Upvotes: 0

mplungjan
mplungjan

Reputation: 177851

This is the closest I can get when not using collapse which is what your issue was

  • border-spacing:0;
  • border-top/bottom: 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>

Upvotes: 3

Related Questions