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

Привет всем! Сегодня мы познакомимся с кодом, позволяющим создавать открывающуюся\закрывающуюся по клику таблицу с помощью HTML. Зачем — решать вам, я же столкнулся с этой задачей во время работы над сайтом, где прайс-лист размещен почти на каждой странице, и насчитывает порядка 200 позиций — эдакая простыня, которая страницу никак не украшает. Сразу подчеркну — код делал не я, но почему бы не поделиться прекрасным? Тем более адаптация под свои нужды крайне проста.

  1. <style>
    
  2. /* у таблицы может быть любой класс или id */
    
  3. .demotable {
    
  4. width: 100%;
    
  5. border-collapse: collapse;
    
  6. text-align: center;
    
  7. }
    
  8. .demotable thead {
    
  9. font-size: small;
    
  10. text-align: right;
    
  11. }
    
  12. .demotable tbody td, .demotable tbody th {
    
  13. border: 1px groove #e1d188;
    
  14. }
    
  15. .demotable tbody tr:nth-of-type(1) th {
    
  16. background: #fff5d7;
    
  17. }
    
  18. .demotable a[href^="#all"], .demotable a[href="#close"] {
    
  19. text-decoration: none;
    
  20. border-bottom: 1px dashed;
    
  21. }
    
  22.  
  23. /* здесь вся магия, если браузер не поддерживает структурные псевдоклассы, то список будет раскрыт, т.е. доступ к данным сохранится */
    
  24. [id^="all"] {
    
  25. position: fixed; /* чтобы страница "не подпрыгивала" к id */
    
  26. }
    
  27. [id^="all"]:target + table a[href^="#all"],
    
  28. [id^="all"]:not(:target) + table tbody tr:nth-of-type(n+4), /* 4 — это порядковый номер tr, после которого строки будут изначально удалены (включительно) */
    
  29. [id^="all"]:not(:target) + table a[href="#close"] {
    
  30. display: none;
    
  31. }
    
  32. </style>
    
  33.  
  34. <!— таких "сжатых" HTML таблиц может быть сколько угодно. Только не забывайте менять id all1 на all2 или all40 —>
    
  35. <br id="all1"/><table class="demotable">
    
  36. <thead>
    
  37. <tr>
    
  38. <td colspan="3"><a href="#close">свернуть</a><a href="#all1">развернуть</a>
    
  39. <tfoot>
    
  40. <tr>
    
  41. <td colspan="3"><a href="#all1">посмотреть весь список</a>
    
  42. <tbody>
    
  43. <tr>
    
  44. <th>Столбец 1
    
  45. <th>Столбец 2
    
  46. <th>Столбец 3
    
  47. <tr>
    
  48. <th>Строка 1
    
  49. <td>1.1
    
  50. <td>1.2
    
  51. <tr>
    
  52. <th>Строка 2
    
  53. <td>2.1
    
  54. <td>2.2
    
  55. <tr>
    
  56. <th>Строка 3
    
  57. <td>3.1
    
  58. <td>3.2
    
  59. <tr>
    
  60. <th>Строка 4
    
  61. <td>4.1
    
  62. <td>4.2
    
  63. <tr>
    
  64. <th>Строка 5
    
  65. <td>5.1
    
  66. <td>5.2
    
  67. <tr>
    
  68. <th>Строка 6
    
  69. <td>6.1
    
  70. <td>6.2
    
  71. <tr>
    
  72. <th>Строка 7
    
  73. <td>7.1
    
  74. <td>7.2
    
  75. <tr>
    
  76. <th>Строка 8
    
  77. <td>8.1
    
  78. <td>8.2
    
  79. </table>

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