Bootstrap table cell has different hover color

I've created a Bootstrap table and enabled .table-hover. I've also set a background color in my CSS for the hover. However, when I hover over a row, whatever cell my cursor is on is not filled with the hover color. I don't think this is the default behavior.

table HTML snippet

<div class="table-responsive">
   <table class="table table-hover">
      <thead>
         <tr>
            <th>Security Score </th>
            <th>Detected Name </th>
            <th>IP Address </th>
            <th>Mac Address </th>
            <th>Type</th>
            <th>Major Issues </th>
            <th>Minor Issues </th>
            <th><span class="nobr">Action</span></th>
         </tr>
      </thead>

      <tbody>
         <tr>
           <td>10 %</td>
              <td>DB-01</td>
              <td>192.168.1.100</td>
              <td>00:11:22:33:44:55</td>
              <td>Windows 2003</td>
              <td>7</td>
              <td>3</td>
              <td><a href="#">View</a>
            </td>
         </tr>
      </tbody>
   </table>
</div>

The Only custom CSS I Have related to tables

.table tbody tr:hover td, .table tbody tr:hover th {
    background-color: #26B99A; }