CODEWITHSUNDEEP
csshtmlhtml-table
John John
John John

Reputation: 1

How can I have continuous hover color over table row?

I have the following table which is being created inside my asp.net web application:

.table tbody tr:hover td,
.table tbody tr:hover th {
  background-color: #eeeeea;
  cursor: pointer;
}
<table class='table' style='border-collapse:separate; border-spacing:1em;'>
  <thead>
    <tr>
      <th style='text-align:left'></th>
      <th style='text-align:right'>Pages</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>objectives</td>
      <td>3<td>
    </tr>
  </tbody>
</table>

Now when I hover over a table row, I get the following effect:

screenshot

Where there will be a white area between the table <td> as shown above.. So can anyone advice on this please? How can I define a continuous hover over my entire table row?

I've tried setting the following to change the border color on hover, but this has no effect:

.table tbody tr:hover td,
.table tbody tr:hover th {
  background-color: #eeeeea;
  border-color: #eeeeea;
  cursor: pointer;
}

Upvotes: 0

Views: 329

Answers (2)

Stickers
Stickers

Reputation: 78686

The gap is from border-collapse:separate; border-spacing:1em; on the table, change that to border-collapse:collapse;, and use padding on th and td for spacing as needed.

Side note, you forgot to close the second <td> in the markup.

.table tbody tr:hover td,
.table tbody tr:hover th {
  background-color: pink;
  cursor: pointer;
}

.table th,
.table td {
  padding: 1em;
}
<table class='table' style='border-collapse:collapse;'>
  <thead>
    <tr>
      <th style='text-align:left'></th>
      <th style='text-align:right'>Pages</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>objectives</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

Upvotes: 4

Gwellin
Gwellin

Reputation: 484

Try to colour the row its self, and make the cells transparent.

.table tbody tr:hover {
  background-color: #eeeeea;
  cursor: pointer;
}
.table tbody tr td, .table tbody tr th {
  background-color: transparent;
}

Upvotes: 0

Related Questions