Адаптивная таблица на сайте

Если вы ищете решение как создать адаптивную таблицу (таблицу для мобильного телефона) на вашем сайте, то этот урок для вас. Вам необходимо выполнить 2 действия.

Так выглядит таблица до обработки

Так после

1 Шаг: Нужно добавить следующий код в ваш CSS-файл. Приведенный ниже код выстраивает строчный ряд в столбцы, т.е. на мобильном устройстве каждый столбец будет переносится на новую строку.

@media screen and (max-width: 600px) {
    table {
        width: 100%;
    }
    thead {
        display: none;
    }
    tr:nth-of-type(2n) {
        background-color: inherit;
    }
    tr td:first-child {
        background: #f0f0f0;
        font-weight: bold;
        font-size: 1.3em;
    }
    tbody td {
        display: block;
        text-align: center;
    }
    tbody td:before {
        content: attr(data-th);
        display: block;
        text-align: center;
    }
}

2 Шаг: Необходимо добавить Javascript на страницу. Код извлекает текст заголовка и добавляет его к каждой ячейке.

<script>
    (function() {
        var headertext = [];
        var headers = document.querySelectorAll("thead");
        var tablebody = document.querySelectorAll("tbody");

        for (var i = 0; i < headers.length; i++) {
            headertext[i] = [];
            for (var j = 0, headrow; headrow = headers[i].rows[0].cells[j]; j++) {
                var current = headrow;
                headertext[i].push(current.textContent.replace(/\r?\n|\r/, ""));
            }
        }
        if (headers.length > 0) {
            for (var h = 0, tbody; tbody = tablebody[h]; h++) {
                for (var i = 0, row; row = tbody.rows[i]; i++) {
                    for (var j = 0, col; col = row.cells[j]; j++) {
                        col.setAttribute("data-th", headertext[h][j]);
                    }
                }
            }
        }
    }());
</script>