ну создайте таблицу HTML и задайте ей класс container в tamplate.css своего шаблона
<table width="778" cellspacing="0" cellpadding="0" border="0" height="233" class="container">
class="container" вот как он расписан у меня:
/* контейнер */
.container { position: relative;
}
.container tr:hover { background: #E0E0E0; }
.container td, td:hover:after { width: 50px; }
.container td:hover {
background: #D0D0D0 ;
}
.container td:hover:after {
content: '';
display: block;
position: absolute;
top: 0;
bottom: 0;
background: #222;
z-index: -1;
}
меняйте под себя, то есть цвет и размер, бакграунд+
вы можете закрасить первый столбец col как вам надо и шапку тоже
я сдеал так:
<colgroup> <col width="157" style="background-color: #f5f5f5;"></col> <col width="157"></col> <col width="157" style="background-color: #ccccff;"></col> <col width="157"></col> <col width="157" style="background-color: #ccccff;"></col> <col width="157"></col> <col width="157" style="background-color: #ccccff;"></col> <col width="157"></col> <col width="157" style="background-color: #ccccff;"></col> <col width="157"></col> <col width="157" style="background-color: #ccccff;"></col> <col width="157"></col> <col width="157" style="background-color: #ccccff;"></col> <col width="157"></col> </colgroup>
вот код моей таблицы, для наглядности:
<table class="container" height="123" border="0" cellpadding="0" cellspacing="0" width="873">
<colgroup> <col style="background-color: #f5f5f5;" width="157"></col> <col width="157"></col> <col style="background-color: #ccccff;" width="157"></col> <col width="157"></col> <col style="background-color: #ccccff;" width="157"></col> <col width="157"></col> <col style="background-color: #ccccff;" width="157"></col> <col width="157"></col> <col style="background-color: #ccccff;" width="157"></col> <col width="157"></col> <col style="background-color: #ccccff;" width="157"></col></colgroup>
<tbody>
<tr height="17">
<td height="17" width="94">Метрическая система нумерации</td>
<td style="text-align: center;" width="70" align="right">25</td>
<td style="text-align: center;" width="80" align="right">25,5</td>
<td style="text-align: center;" width="64" align="right">26</td>
<td style="text-align: center;" width="75" align="right">26,5</td>
<td style="text-align: center;" width="67" align="right">27</td>
<td style="text-align: center;" width="68" align="right">27,5</td>
<td style="text-align: center;" width="64" align="right">28</td>
<td style="text-align: center;" width="64" align="right">28,5</td>
<td style="text-align: center;" width="64" align="right">29</td>
<td style="text-align: center;" width="64" align="right">30</td>
</tr>
<tr height="17">
<td height="17">Штрихмассовая система нумерации</td>
<td style="text-align: center;" align="right">39</td>
<td style="text-align: center;" align="right">40</td>
<td style="text-align: center;" align="right">40,5</td>
<td style="text-align: center;" align="right">41</td>
<td style="text-align: center;" align="right">42</td>
<td style="text-align: center;" align="right">43</td>
<td style="text-align: center;" align="right">43,5</td>
<td style="text-align: center;" align="right">44</td>
<td style="text-align: center;" align="right">45</td>
<td style="text-align: center;" align="right">46</td>
</tr>
</tbody>
</table>
Рады сообщить о специальном предложении от Nevigen, разработчика расширений для JoomShopping.
С 29 декабря 2025 года по 7 января 2026 года будет действовать скидка 26% на все заказы от $50.
Предложение распространяется на весь ассортимент продукции.
Подробности и полный каталог расширений доступны по ссылке:
https://nevigen.com/ru
#joomshopping
04.09.2024, 20:36:06