JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="table-wrapper">
<table class="table table-products">
  <thead>
    <tr>
      <th>Фото</th>
      <th>Код</th>
      <th>Название</th>
      <th>В наличии</th>
      <th>Руб. без НДС</th>
      <th>Руб. с НДС</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><img src="http://placehold.it/50x50"></td>
      <td><p>100201</p></td>
      <td><p><a>текст</a></p></td>
      <td><p>125</p>
      </td>
      <td><p>15500</p></td>
      <td><p>15500</p></td>
    </tr>
    <tr>
      <td><img src="http://placehold.it/50x50"></td>
      <td><p>100201</p></td>
      <td><p><a>текст</a></p></td>
      <td><p>125</p>
      </td>
      <td><p>15500</p></td>
      <td><p>15500</p></td>
    </tr>
    <tr>
      <td><img src="http://placehold.it/50x50"></td>
      <td><p>100201</p></td>
      <td><p><a>текст</a></p></td>
      <td><p>125</p>
      </td>
      <td><p>15500</p></td>
      <td><p>15500</p></td>
    </tr>
  </tbody>
</table>
</div>
      </div>

CSS

.table-wrapper {
    padding:20px;
}
.table-products>tbody>tr:hover {
    background-color:#006cd0;
    border-left: 20px solid #006cd0;
    border-right: 20px solid #006cd0;
    border-top: 1px double #006cd0;
    border-bottom: 1px double #006cd0;
}
.table-products>tbody>tr:first-child:hover {
    border-top-style: hidden;
    border-bottom: 1px double #006cd0;
}
.table-products>tbody>tr:first-child:hover > td {
    padding-top: 9px;
}
.table-products>tbody>tr:hover > td:first-child, 
.table-products>tbody>tr:hover > td:first-child > * {
    padding-left: 0;
    padding-right: 0;
}
.table-products>tbody>tr:hover > td:last-child,
.table-products>tbody>tr:hover > td:last-child > * {
    padding-right: 0;
}