JSFiddle - React, Tailwind, and code Playground

by Dmitriy Shvanyk

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<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>
           ...

CSS

.table-wrapper {
    background-color: red;
}
.table-products>tbody>tr:hover {
    background-color:#006cd0;
}
.table-products>tbody>tr td:nth-child(8n + 1), 
.table-products>tbody>tr td:nth-child(8n + 8) {    
    position: relative;
}
.table-products>tbody>tr:hover td:nth-child(8n + 1), 
.table-products>tbody>tr:hover td:nth-child(8n + 8) {
    background-color:#006cd0;
}
.table-products>tbody>tr:hover td:nth-child(8n + 1):before, 
.table-products>tbody>tr:hover td:nth-child(8n + 8):before{
    content: '';
    position: absolute; top: 0;
    width: 20px;
    height: 100%;
    background-color:#006cd0;
}
.table-products>tbody>tr:hover td:nth-child(8n + 1):before{
   left: -20px;   
}
.table-products>tbody>tr:hover td:nth-child(8n + 8):before{
    right: -20px;
}