Drop-down table / CSS

drop-down-table-css.markdown

Drop-down table / CSS

A Pen by Beibit Sakhanov on CodePen.

License.

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

style.css

.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;
}