It is impossible to add a background to the right when hovering a table row that is knocked out of its edge.

Question

Greetings to all! I have a label, I want to use styles to make it so that when hovering over each of the lines, the background of the hover spreads over the table to the left and right for 20px within the container. How can I do that? Added to Fidl

 .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>

Qwertiy ♦ Qwertiy 76.2k 17 73 200 · Accepted Answer · 2015-11-24T16:47:03

The backlight continues smoothly and does not affect the boundaries.

 .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>

soledar10 soledar10 22.4k five 21 51 · Answer 2 · 2015-11-04T11:47:41

maybe so

 .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>

unfortunately not .. the table gotten together, but this should not be .. - it should occupy the entire width of the container.
I tried to do it with the help of pseudo-classes :before and :after , but for now it doesn’t work out ...

Answer 3 · 2015-11-04T11:01:47

If without JS , then it is possible through position: absolute; for a block (for example, a pseudo element :after ), but there will be a problem with the dynamic height of the table cell, therefore it is better to set a fixed height.

In the example, there is no prevention of increasing the height of a table cell with a long text!

Just fidl

UPD

Added clearing of cell background and updated feed

I cannot solve the problem of string height on CSS (at least I do not know the solution).

 .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>

Yes, you need to provide the length of the text jsfiddle.net/fk5gqqk4/3
besides, if the background is not white, then it does not work ..
For a white table fill, it is possible for all-in-one block :after specify z-index large and fill it with opacity

kulaeff kulaeff 101 one · Answer 4 · 2015-11-04T09:25:59

You can add empty columns to the left and right of the table and specify the width they need, and remove the padding from the parent .table-wrapper .

For example http://jsfiddle.net/ngp67hwd/

and where is your background beyond the table when you hover?

It is impossible to add a background to the right when hovering a table row that is knocked out of its edge.

4 answers 4

UPD

More articles: