continues hover color over border spacing table-CodePudding

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 ></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

CodePudding user response：

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>

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

th, td {
  padding: 0 8px;
}

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

https://jsfiddle.net/02apjs49/3/

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.