Coloring HTML Table Borders On Hover

border-collapse
html table cell mouseover popup
html table css examples beautiful
table hover css
html table border style
table border color
html highlight table cell on hover
border-collapse in html without css

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>

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>

How to Add Border to HTML Table, How do you change the color of a table border in HTML? Highlight Table Row using CSS . /* Define the hover highlight color for the table row */.hoverTable tr:hover Generate the code for a simple HTML table.

Highlight Table Row on hover using CSS, How do you put a border on a table in HTML? Table Borders: Light and Dark. In the previous example we set a single color for all the borders of the table. In this page we'll look at setting the “light” and the “dark” borders separately. Note that currently only MSIE recognizes the markup necessary to set the light and dark borders separately.

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

Change Color of All Four Borders Even With `border-collapse , to add the effect to whatever html element you choose. More "Try it Yourself" examples below. The border-color property sets the color of an element's four borders. This property can have from one to four values. Note: Always declare the border-style property before the border-color property. An element must have borders before you can change the color. The numbers in the table specify the first

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).

CSS Styling Tables, table { width: 200px; margin: 0 auto 1em; border-collapse: collapse; td { &:​hover { background: #fff; color: darken(#232c88, 5%); border: 2px solid #232c88; } The look of an HTML table can be greatly improved with CSS: Alfreds Futterkiste. Berglunds snabbköp. Christina Berglund. Centro comercial Moctezuma. Francisco Chang. Königlich Essen. Laughing Bacchus Winecellars. Yoshi Tannamuri. Magazzini Alimentari Riuniti. Giovanni Rovelli. Try it Yourself » To specify table borders in CSS, use the border

Hoverable table, table { border-collapse: collapse; width: 100%; } ​ th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } ​ tr:hover {background-color:#f5f5f5;} A more complex HTML table may also include <caption>, <col>, <colgroup>, <thead>, <tfoot>, and <tbody> elements. Note: Tables should not be used for page layout! Historically, some Web authors have misused tables in HTML as a way to control their page layout.

Highlight Table Row on hover using CSS, hoverTable{ width:100%; border-collapse:collapse; } .hoverTable td{ padding:7px​; border:#4e95f4 1px solid; } /* Define the default color for all the table rows */ . Show table row background color on hover only to highlight the row. Add background color when someone hovers over the row of a table. You can add more colors to the row of a table and display only when someone hovers. This can be useful when you highlight table row on hover rows.

Highlighting HTML table row on hover by making it wider than the , Find out how to create a highlight effect on selected html table row extending tr:​hover td{ cursor:pointer; color:red; border-top: 1px solid grey;  You can use tr:nth-child (rowOrder) to give alternating row color to a Table using CSS. The rowOrder must be "odd" or "even" Above code color every even row order to background color as orange. Applied this CSS code to the Example 1 HTML Table. For CSS table alternate column coloring you can use the CSS code like the following..

Comments
  • You are collapsing the borders but still want to see them?
  • border-collapse: collapse has an intricate algorithm for deciding which border is shown.
  • Collapsed borders have rules to determine which border is the one that is shown. Try border-spacing:0 instead of border-collapse and see if that's any better for you.
  • Ok I understand. border-spacing: 0 leaves you with quite an ugly table though so that still sucks
  • Insane solution man! Well done and thank you! Would you mind explaining that last class please tbody tr:hover + tr td? I don't fully understand how css changes something else
  • I don't think you need to use the tbody and thead here
  • Hi @Frank the tbody isn't really needed but it's just to make sure if you had any normal td cells in the header, they wouldn't get styled. The selector basically says select the td of any tr that is the direct next sibling (the plus means the next sibling) of the tr that is hovered
  • Ah I see! Well that you for the answer and teaching me something new :)
  • I understand why this works, but I wish there was a different answer though