Раскрывающаяся таблица

Задача: есть HTML таблица с тарифами, которая нужна лишь 30-40% посетителям. Часть её нужно показать сразу, чтобы было понятно, что она присутствует и как оформлена. А большую часть скрыть — она будет появляться по клику на ссылке.

Если сделать ссылку с URL-адресом на эту страницу вида

http://shpargalkablog.ru/2013/11/drop-down-list.html#all1

то список будет показан сразу раскрытым.

Столбец 1	Столбец 2	Столбец 3
свернуть развернуть
посмотреть весь список
Строка 1	1.1	1.2
Строка 2	2.1	2.2
Строка 3	3.1	3.2
Строка 4	4.1	4.2
Строка 5	5.1	5.2
Строка 6	6.1	6.2
Строка 7	7.1	7.2
Строка 8	8.1	8.2

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

Раскрывающаяся таблица | CSS

4 комментария: