Приветствую всех! У меня есть табличка, хочу с помощью стилей сделать так, чтобы при наведении на каждую из строк фон ховера распространялся за таблицу влево и вправо на 20px
в пределах контейнера. Как это можно сделать?
Добавил в фидл
.table-wrapper {
padding: 20px;
}
.table-products {
background-color:#d1edff;
}
.table-products>tbody>tr:hover {
background-color: #006cd0;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery.js"></script>
<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>