Как свернуть таблицу после 10 строки?

Question

[Anatoliy]

Как свернуть таблицу после 10 строки сверху не считая <th>без добавления классов в таблицу?
Клик действия идет на всю таблицу.
И что бы разворачивалась :)
Я так полагаю нужен подсчет строк через скрипт.

Еще сразу один вопрос: если возможность оставить нижнюю строку при свернутом состоянии?

Answer 1

[Павел Радьков]

Можно вообще без скриптов сделать через :nth-child() — codepen.io/paulradzkov/pen/VbpNGM?editors=1100

Рассмотрим этот селектор:

table tbody > tr:nth-child(n + 11) {
    display: none;
}

Он выбирает все ряды, начиная с 11-го, внутри tbody и скрывает их.
Шапка таблицы должна лежать в thead, тогда она не учитывается и может иметь любое количество рядов.

В последнюю строку таблицы обычно пишут какой-то суммарный результат, для этого есть тег tfoot.
Если поместить последнюю строку в него, то она будет видна в любом состоянии.

Структура таблицы получится такой:

<table>
    <thead>
        <tr>
            <th></th><th></th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th></th><td></td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <th></th><td></td>
        </tr>
        ...
        <tr>
            <th></th><td></td>
        </tr>
    </tbody>
</table>

Comments

[Anatoliy]

Спасибо большое, то что нужно.