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

Уменьшайте ширину окна, чтобы увидеть результат

Исходный код этого примера:

<style>
    .table-box {
        max-width: 1024px;
    }
    .table-box p {
        font-size: larger;
        font-weight: bold;
    }
    table {
        width: 100%;
        border: 1px solid #ccc;
        border-collapse: collapse;
    }
    thead {
        border: 1px solid #ccc;
    }
    th, td {
        border-left: 1px solid #ccc;
        padding: 5px;
    }
    @media (min-width: 641px) {
        td:nth-last-child(-n+2) {
            text-align: right;
        }
    }
    @media (max-width: 640px) {
        table,
        thead,
        tbody,
        th,
        td,
        tr {
            display: block;
        }
        thead {
            display: none;
        }
        tr {
            border-bottom: 1px solid #ccc;
        }
        tr:last-child {
            border-bottom: 0;
        }
        tr:last-child td:last-child {
            border-bottom: 0;
        }
        td {
            border: none;
            position: relative;
            white-space: normal;
            text-align:left;
        }
        td:before {
            content: attr(data-title);
            display: block;
            white-space: nowrap;
            font-weight: bold;
        }
    }
</style>
<div class="table-box">
    <table>
        <p>Цена восстановления и заправки картриджей SAMSUNG</p>
        <thead>
            <tr>
                <th>Тип</th>
                <th>Наименование</th>
                <th>Восст.</th>
                <th>Запр.</th>
            </tr>
        </thead>
        <tbody>
        <tr>
            <td data-title="Тип">MLTD108S</td>
            <td data-title="Наименование">Samsung №MLTD108S ML-1640/1641/1645/2240/2241 (MLTD108S)</td>
            <td data-title="Восстановление">1100</td>
            <td data-title="Заправка">700</td>
        </tr>
        <tr>
            <td data-title="Тип">MLTD109S</td>
            <td data-title="Наименование">Samsung №MLTD109S SCX-4300 прошитый (MLTD109S)</td>
            <td data-title="Восстановление">800</td>
            <td data-title="Заправка">350</td>
        </tr>
        <tr>
            <td data-title="Тип">MLTD111S</td>
            <td data-title="Наименование">Samsung №MLTD111S M2020/М2022/М2070 (MLTD111S)</td>
            <td data-title="Восстановление">700</td>
            <td data-title="Заправка">300</td>
        </tr>
        </tbody>
    </table>
</div>

Чтобы не писать в каждую ячейку атрибут data-title, можно использовать следующий скрипт:

<script>
    document.querySelectorAll('div.table-box table').forEach(function(tbl){
        var th=tbl.querySelectorAll('thead th'), c=th.length;
        tbl.querySelectorAll('tbody tr').forEach(function(tr){
            for(var h=0;h<c;h++) tr.children[h].setAttribute('data-title',th[h].innerText+':');
        })
    })
</script>

Другой вариант, когда название столбца ставится слева от содержимого ячейки: Таблица для маленького экрана

.
Прокомментировать/Отблагодарить