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

Задача: есть 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>
в f t
наверх ↑

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

Анонимный
возможно ли сделать такую же таблицу только что бы раскрывалась в несколько шагов?
NMitra
Покажите пример.
Анонимный
Варианты древовидной таблицы
http://htmlforum.ru/index.php?showtopic=46770&p=315346
NMitra
Зачем чебоксы и ссылки там?