0

Приветствую всех! У меня есть табличка, хочу с помощью стилей сделать так, чтобы при наведении на каждую из строк фон ховера распространялся за таблицу влево и вправо на 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>

4 ответа 4

1

Подсветка продолжается ровно и не затрагивает границы.

.table-wrapper {
  padding: 20px;
}

.table-products {
  background-color: #d1edff;
}

.table-products > tbody > tr > td,
.table-products > tbody > tr > th {
  padding: .25em;
}


.table-products > tbody > tr:hover td:first-child,
.table-products > tbody > tr:hover th:first-child,
.table-products > tbody > tr:hover td:last-child,
.table-products > tbody > tr:hover th:last-child {
  position: relative;
}

.table-products > tbody > tr:hover,
.table-products > tbody > tr:hover > td:first-child:before,
.table-products > tbody > tr:hover > th:first-child:before,
.table-products > tbody > tr:hover > td:last-child:before,
.table-products > tbody > tr:hover > td:last-child:before {
  background-color: #006cd0;
}

.table-products > tbody > tr:hover > td:first-child:before,
.table-products > tbody > tr:hover > th:first-child:before,
.table-products > tbody > tr:hover > td:last-child:before,
.table-products > tbody > tr:hover > td:last-child:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 100%;
  top: 0;
}

.table-products > tbody > tr:hover > td:first-child:before,
.table-products > tbody > tr:hover > th:first-child:before {
  right: 100%;
}

.table-products > tbody > tr:hover > td:last-child:before,
.table-products > tbody > tr:hover > td:last-child:before {
  left: 100%;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<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>

1

может так

.table-wrapper {
    background-color: red;
}
.table-products>tbody>tr:hover {
    background-color:#006cd0;
}
.table-products>thead>tr th:nth-child(8n + 1), 
.table-products>thead>tr th:nth-child(8n + 8), 
.table-products>tbody>tr td:nth-child(8n + 1), 
.table-products>tbody>tr td:nth-child(8n + 8) {
    background-color:#fff;
    border: none;
}
.table-products>tbody>tr:hover td:nth-child(8n + 1), 
.table-products>tbody>tr:hover td:nth-child(8n + 8) {
    background-color:#006cd0;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<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>
                    <th>Руб. с НДС</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td></td>
                    <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>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <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>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <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>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

4
  • к сожалению нет.. table ужался, а этого не должно быть.. - он должен занимать всю ширину контейнера. я пытался сделать с помощью псевдоклассов :before и :after, но пока не получается..
    – Вася
    4 ноя 2015 в 13:58
  • больше никаких мыслей нету?
    – Вася
    4 ноя 2015 в 16:03
  • 1
    jsfiddle.net/soledar10/eohk98oy
    – soledar10
    4 ноя 2015 в 18:43
  • все, разобрался! надо было 6 столбцов оставить)
    – Вася
    5 ноя 2015 в 15:51
1

Если без JS, то можно через position: absolute; для блока (например псевдо элемента :after), но будет проблема с динамической высотой ячейки таблицы, поэтому лучше задать фикс высоту.

В примере нету предотвращения увеличения высоты ячейки таблицы при длинном тексте!

Так же фидл

UPD

Добавил очищение фона ячеек и обновил фидл

Проблему я высотой строки на CSS никак не решить (по крайней мере мне не известно решение).

.container {
    position: relative;
}
.table-wrapper {
    padding:20px;
}
.table-products td {
    background: #fff;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    height: 70px;
}
.table-products tr {
    background: #fff;
}
.table-products>tbody>tr:hover td,
.table-products>tbody>tr:hover {
    background: none !important;
}
.table-products>tbody>tr:hover:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    height: 70px;
    background: red;
    z-index: -1;
    background-color:#006cd0;
}
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<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>

5
  • да, нужно предусмотреть длину текста jsfiddle.net/fk5gqqk4/3
    – Вася
    4 ноя 2015 в 14:06
  • к тому же, если фон не белый, то не работает..
    – Вася
    4 ноя 2015 в 14:47
  • @Вася, я же об этом написал. Для белой заливки таблицы можно для всевдоблока :after указать z-index большой и заливку сделать с непрозрачностью
    – korytoff
    4 ноя 2015 в 18:41
  • тут вам только JS поможет
    – korytoff
    4 ноя 2015 в 18:41
  • Или еще проще, отключать заливку ячеек – jsfiddle.net/ja00gbb9/2
    – korytoff
    4 ноя 2015 в 18:45
0

Можно добавить пустые столбцы слева и справа таблицы и указать нужную им ширину, а у родительского .table-wrapper убрать padding.

Например http://jsfiddle.net/ngp67hwd/

1
  • и где здесь по вашему фон выходит за пределы таблицы при наведении? это совсем не то, что нужно
    – Вася
    4 ноя 2015 в 9:39

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.