Доброго дня!
Еще одна звездочка на небе моего сайта, ловите!
Стояла задача сделать удобную для пользователя таблицу в которой много разных ценовых позиций.
Вот посмотрите как это например реализовано на сайте: http://polikarbonat-41km.ru
Не люблю большое количество слов. ПЕРЕХОЖУ К ДЕЛУ:
Код таблицы:
<strong>Сотовый поликарбонат Стандарт</strong> <div class="table col-lg-12"> <table> <tbody> <tr class="th"> <th></th> <th></th> <th></th> <th class="pink" colspan="2">Цена розница, руб.</th> </tr> <tr class="table-head th"> <th>Наименование</th> <th>Размер, мм</th> <th>Вес, кг</th> <th class="pink">Прозрачный</th> <th class="pink">Цветной</th> </tr> <tr class="ts1"> <td>сотовый поликарбонат 4 мм</td> <td>6000-2010</td> <td>0.8</td> <td class="pink">2 400</td> <td class="pink">2 500</td> </tr> <tr> <td>сотовый поликарбонат 4 мм</td> <td>12000-2010</td> <td>1.6</td> <td class="pink">4 800</td> <td class="pink">5 000</td> </tr> <tr class="ts1"> <td>сотовый поликарбонат 6 мм</td> <td>6000-2010</td> <td>1.3</td> <td class="pink">3 900</td> <td class="pink"><span style="color: #000000;">4 050</span></td> </tr> <tr> <td>сотовый поликарбонат 6 мм</td> <td>12000-2010</td> <td>2.6</td> <td class="pink"><span style="color: #000000;">7 800</span></td> <td class="pink"><span style="color: #000000;">8 100</span></td> </tr> <tr class="ts1"> <td>сотовый поликарбонат 8 мм</td> <td>6000-2010</td> <td>1.5</td> <td class="pink">4 700</td> <td class="pink">4 950</td> </tr> <tr> <td>сотовый поликарбонат 8 мм</td> <td>12000-2010</td> <td>3.0</td> <td class="pink">9 400</td> <td class="pink">9 900</td> </tr> <tr class="ts1"> <td>сотовый поликарбонат 10 мм</td> <td>6000-2010</td> <td>1.7</td> <td class="pink">5 350</td> <td class="pink">5 650</td> </tr> <tr> <td>сотовый поликарбонат 10 мм</td> <td>12000-2010</td> <td>3.4</td> <td class="pink">10 700</td> <td class="pink">11 300</td> </tr> <tr class="ts1"> <td>сотовый поликарбонат 16 мм</td> <td>6000-2010</td> <td>2.7</td> <td class="pink">9 100</td> <td class="pink">9 350</td> </tr> <tr> <td>сотовый поликарбонат 16 мм</td> <td>12000-2010</td> <td>5.4</td> <td class="pink">18 200</td> <td class="pink">18 700</td> </tr> <tr class="ts1"> <td>сотовый поликарбонат 20 мм</td> <td>6000-2010</td> <td>3.0</td> <td class="pink">10 150</td> <td class="pink"></td> </tr> <tr> <td>сотовый поликарбонат 20 мм</td> <td>12000-2010</td> <td>6.0</td> <td class="pink">20 300</td> <td class="pink"></td> </tr> <tr class="ts1"> <td>сотовый поликарбонат 25 мм</td> <td>6000-2010</td> <td>3.5</td> <td class="pink">11 800</td> <td class="pink"> 12 400</td> </tr> <tr> <td>сотовый поликарбонат 25 мм</td> <td>12000-2010</td> <td>7.0</td> <td class="pink">23 600</td> <td class="pink"> 24 800</td> </tr> </tbody> </table> </div>
CSS настройки:
#prices .header { overflow: hidden; } #prices .header ul { padding: 0; overflow: hidden; margin-bottom: 0; } #prices a { color: #007fff; } #prices .header { margin-top: 100px; } #prices .header ul { list-style-type: none; } #prices .header ul li { display: inline-block; margin-right: 0; margin-bottom: 19px; } #prices .header ul li a { text-decoration: none; border-bottom: 1px dashed #007fff; outline: 0; } #prices .header .ui-state-active a { background-color: #f28500; padding: 5px 10px; } #prices .header .ui-state-active a { color: white; border-bottom: none; } #prices .header .li { height: 40px; } /*#prices .table { margin-top: 30px; } */ td, th { padding-left:10px; } #prices .table td { border-collapse:collapse; /*padding:2px;*/ text-align: left; height: 40px; } #prices .table table { width: 100%; } #prices .table table tr.table-head { border-bottom: 4px solid #282828; } #prices .table th { height:28px; color:#151515; font-weight: bold; text-align: left; } #prices .table tr:not(.th):hover { background-color:#aef1af; } #prices .table tr:not(.th) { -webkit-transition:background 0.5s ease; -moz-transition:background 0.5s ease; -o-transition:background 0.5s ease; transition:background 0.5s ease; cursor:default; } #prices .table .ts1 { background-color:#fef0de; } #prices .table .price { margin: 30px 0; } #prices .ui-tabs-panel { overflow: hidden; }
Related Posts