РАСКРЫВАЮЩАЯСЯ ПО КЛИКУ ТАБЛИЦА НА HTML

by Denis Tverdokhlebov

HTML

<!— таких "сжатых" 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

/* у таблицы может быть любой класс или 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;
}