Раскрывающаяся по клику таблица на HTML

Привет всем! Сегодня мы познакомимся с кодом, позволяющим создавать открывающуюся\закрывающуюся по клику таблицу с помощью 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>
```

Пример работы доступен тут 🙂

Oleksiy Lavrynenko

Раскрывающаяся по клику таблица на HTML

Понравилось это:

Похожее