Привет всем! Сегодня мы познакомимся с кодом, позволяющим создавать открывающуюся\закрывающуюся по клику таблицу с помощью HTML. Зачем — решать вам, я же столкнулся с этой задачей во время работы над сайтом, где прайс-лист размещен почти на каждой странице, и насчитывает порядка 200 позиций — эдакая простыня, которая страницу никак не украшает. Сразу подчеркну — код делал не я, но почему бы не поделиться прекрасным? Тем более адаптация под свои нужды крайне проста.
<style>
/* у таблицы может быть любой класс или id */
.demotable {
width: 100%;
border-collapse: collapse;
text-align: center;
}
.demotable thead {
font-size: small;
text-align: right;
}
.demotable tbody td, .demotable tbody th {
border: 1px groove #e1d188;
}
.demotable tbody tr:nth-of-type(1) th {
background: #fff5d7;
}
.demotable a[href^="#all"], .demotable a[href="#close"] {
text-decoration: none;
border-bottom: 1px dashed;
}
/* здесь вся магия, если браузер не поддерживает структурные псевдоклассы, то список будет раскрыт, т.е. доступ к данным сохранится */
[id^="all"] {
position: fixed; /* чтобы страница "не подпрыгивала" к id */
}
[id^="all"]:target + table a[href^="#all"],
[id^="all"]:not(:target) + table tbody tr:nth-of-type(n+4), /* 4 — это порядковый номер tr, после которого строки будут изначально удалены (включительно) */
[id^="all"]:not(:target) + table a[href="#close"] {
display: none;
}
</style>
<!— таких "сжатых" HTML таблиц может быть сколько угодно. Только не забывайте менять id all1 на all2 или all40 —>
<br id="all1"/><table class="demotable">
<thead>
<tr>
<td colspan="3"><a href="#close">свернуть</a><a href="#all1">развернуть</a>
<tfoot>
<tr>
<td colspan="3"><a href="#all1">посмотреть весь список</a>
<tbody>
<tr>
<th>Столбец 1
<th>Столбец 2
<th>Столбец 3
<tr>
<th>Строка 1
<td>1.1
<td>1.2
<tr>
<th>Строка 2
<td>2.1
<td>2.2
<tr>
<th>Строка 3
<td>3.1
<td>3.2
<tr>
<th>Строка 4
<td>4.1
<td>4.2
<tr>
<th>Строка 5
<td>5.1
<td>5.2
<tr>
<th>Строка 6
<td>6.1
<td>6.2
<tr>
<th>Строка 7
<td>7.1
<td>7.2
<tr>
<th>Строка 8
<td>8.1
<td>8.2
</table>
Пример работы доступен тут 🙂