Or05230
Or05230

Reputation: 83

continues hover color over border spacing table

My table has border-collapse: seperate; and border-spacing: 50px 0;.
Upon hover, the whole row bg changes. Issue is, the empty area of the border-spacing doesn't change.
I can use padding instead of boeder-spacing, however i have borders and background colors over the columns, so padding won't change them but just make the cells bigger.
So the result must have seperated cells with seperated borders but upon hover the whole row background must be equal.



<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: seperate;
  width: 100%;
  border-spacing: 50px 0;
}

th, td {
  padding: 8px;
  text-align: left;
  border-right: 1px solid black;
    border-left: 1px solid black;

}

.second-row {
background: red;
}

tr:hover {background-color: yellow;}
</style>
</head>
<body>

<table>
<colgroup><col><col class="second-row"></colgroup>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
 
</table>

</body>
</html>



fiddle

Upvotes: 1

Views: 474

Answers (1)

E.J
E.J

Reputation: 106

If I'm understanding correctly, I think you will need to add a span or div into the middle column to provide the spacing instead of using the border-spacing because of the background colour on hover.

  <tr>
    <th>First Name</th>
    <th><span>Last Name</span></th>
    <th>Points</th>
  </tr>

* {
  box-sizing: border-box;
}
table {
  border-collapse: collapse;
  height: 100%;
  width: 100%;
}

th, td {
  padding: 0 8px;
  text-align: left;
  border-right: 1px solid black;
  border-left: 1px solid black;

}

tr:hover {background-color: yellow;}
tr:hover span {background-color: yellow;}

span {
  background: red;
  display: block;
  border-left: 1px solid black;
  border-right: 1px solid black;
  height: 100%;
  padding: 8px;
  margin: 0 20px;
}

https://jsfiddle.net/hdtgomr3/

The layout is very similar but the background colour on hover is able to be applied to the whole row without the border-spacing.

Edit: updated link and added hover and padding property to code snippet to ensure background colour is changed across the whole row without gaps.

Alternatively, use empty cells for the empty looking columns: https://jsfiddle.net/8uemtj0x/22/

Upvotes: 2

Related Questions