Доброго дня!
Еще одна звездочка на небе моего сайта, ловите!
Стояла задача сделать удобную для пользователя таблицу в которой много разных ценовых позиций.
Вот посмотрите как это например реализовано на сайте: http://polikarbonat-41km.ru
Не люблю большое количество слов. ПЕРЕХОЖУ К ДЕЛУ:
Код таблицы:
[html]<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>
[/html]
CSS настройки:
[html]#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;
}
[/html]
