Адаптивные таблицы

HTML

<table class="table">
    <thead>
        <tr>
            <th>Id</th>
            <th>Название</th>
            <th>Описание</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-label="Id">1</td>
            <td data-label="Название">Запись 1</td>
            <td data-label="Описание">Описание 1</td>
        </tr>
        <tr>
            <td data-label="Id">2</td>
            <td data-label="Название">Запись 2</td>
            <td data-label="Описание">Описание 2</td>
        </tr>
    </tbody>
</table>

CSS

@media screen and (max-width: 768px) {
    .table {
        border: 1px solid #ccc;
        width: 100%;
        margin: 0;
        padding: 0;
        border-collapse: collapse;
        border-spacing: 0
    }

    .table tr {
        padding: 5px
    }

    .table th,
    .table td {
        position: relative;
        padding: 10px
    }

    @media screen and (max-width: 979px) {
        .table {
            border: 0
        }

        .table thead {
            display: none
        }

        .table td {
            display: block;
            width: 100% \9;
            float: left \9;
            text-align: left;
            padding-left: 50%;
            border-bottom: 1px solid #cacaca;
            border-top: none
        }

        .table td:first-child {
            border-top: 1px solid #ddd
        }

        .table td:last-child {
            border-bottom: 1px solid #ddd;
            margin-bottom: 50px
        }

        .table td:before {
            content: attr(data-label);
            position: absolute;
            top: 10px;
            left: 10px;
            width: 45%
        }
    }

    @media screen and (max-width: 767px) {
        .table td {
            font-size: 14px
        }

    }
    @media screen and (max-width: 767px) and (min-width: 500px) {
        .container-grid .cols.col-sm-6 {
            width: 50%;
        }
    }
    @media screen and (max-width: 479px) {
        .table td {
            padding: 60px 20px 20px 10px;
            font-size: 17px;
            border-bottom: none
        }

        .table td:before {
            width: 100%;
            font-size: 15px;
            background: #eeeff0;
            top: 0;
            left: 0;
            padding: 10px;
            white-space: nowrap
        }
    }

}