Задача: есть 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>
4 комментария:
http://htmlforum.ru/index.php?showtopic=46770&p=315346