Стильные таблицы

Доброго дня!
Еще одна звездочка на небе моего сайта, ловите!

Стояла задача сделать удобную для пользователя таблицу в которой много разных ценовых позиций.
Вот посмотрите как это например реализовано на сайте: 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>
&nbsp;

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

Profile cancel