Clickable HTML table

Hello everyone! Today we will get acquainted with the code that allows you to create a table that opens / closes by clicking using HTML. Why – you decide, I was faced with this task while working on a site where the price list is located on almost every page and has about 200 items – a kind of sheet that does not decorate the page. I’ll emphasize right away – I didn’t do the code, but why not share the beautiful? Moreover, adaptation to your needs is extremely simple.

```
<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>
```

An example of the work is available here 🙂

Oleksiy Lavrynenko – PR, SMM, WEB

Like this:

Похожее