Question 271976 in Html Question posted in
Some basic documentation can be found here.

Html – How i can set a background-color to the border-spacing when tr hover

I created some spaces between 2 rows. When I hover over the tr element, I cannot assign a background color to the spaces I created with border-spacing.How can I set this?

table {
    border-collapse: separate!important;
    border-spacing: 0 5px!important;
}

tr:hover{
    background-color: red;
}
Tags:

2

Answers


  1. 0

    You can’t apply a background color to space outside of an element. But simulating it via two box shadows should probably work for your scenario:

    tr:hover{
    background-color: red;
    box-shadow: 0px 5px red, 0px -5px red;
}
    Login or Signup to reply.
  2. 0

    It is not possible with border-spacing. Another approach would be with padding:

    table {
  border-spacing: 0;
}

td {
  padding: 15px 5px;
}

tr:hover {
  background-color: red;
}
    <table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search