Twitter-bootstrap 3. Table with one row lose border after hover in Opera

Question

Here is the html markup:

<table class="table table-hover" style="width: 300px;">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
  </tbody>
</table>

and jsfiddle

After hovering on the row they lost it border but after I change resize my window it stay visible . If the table has more than one row then all works fine. You can see this at screencast video also: http://screencast.com/t/hpruvSUbmCE

This bug exists in Opera(any version) only. I'm using bootstrap 3

Answer 1

Really interesting bug i managed to work around it by adding rule to css

.table th,
.table td {
  padding: 4px;
  line-height: 5px;
  text-align: left;
  vertical-align: middle;
  border-top: 1px solid red ! important;
  border-bottom: 1px solid red ! important;  
    height:35px;
}
.table th{
    border-top:none ! important;
}
.table td{
    border-bottom:0px ! important;
}

it have some problem with padding

fiddle