Адаптивные таблицы для мобильных устройств (noJS, jQuery)

На чистом CSS

Рассмотрим как быстро и легко адаптировать таблицу (<table>) для мобильных устройств.

Дана таблица с <thead> 

<table class="srv-table-wrap">
    <thead>
    <tr>
        <th>Параметры</th>
        <th>Wildberries</th>
        <th>Ozon</th>
        <th>Яндекс.Маркет</th>
        <th>AliExpress</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td data-content="Параметры">Аудитория</td>
        <td data-content="Wildberries">Текст текст текст текст текст текст текст текст текст текст</td>
        <td data-content="Ozon">Текст текст текст текст текст текст текст текст текст текст</td>
        <td data-content="Яндекс.Маркет">Текст текст текст текст текст текст текст текст текст текст</td>
        <td data-content="AliExpress">Текст текст текст текст текст текст текст текст текст текст</td>
    </tr>
    <tr>
        <td data-content="Параметры">География продаж</td>
        <td data-content="Wildberries">Текст текст текст текст текст текст текст текст текст текст</td>
        <td data-content="Ozon">Текст текст текст текст текст текст текст текст текст текст</td>
        <td data-content="Яндекс.Маркет">Текст текст текст текст текст текст текст текст текст текст</td>
        <td data-content="AliExpress">Текст текст текст текст текст текст текст текст текст текст</td>
    </tr>
    <tr>
        <td data-content="Параметры">Конкуренция</td>
        <td data-content="Wildberries">Текст текст текст текст текст текст текст текст текст текст</td>
        <td data-content="Ozon">Текст текст текст текст текст текст текст текст текст текст</td>
        <td data-content="Яндекс.Маркет">Текст текст текст текст текст текст текст текст текст текст</td>
        <td data-content="AliExpress">Текст текст текст текст текст текст текст текст текст текст</td>
    </tr>
    <tr>
        <td data-content="Параметры">Складское хранение</td>
        <td data-content="Wildberries">Текст текст текст текст текст текст текст текст текст текст</td>
        <td data-content="Ozon">Текст текст текст текст текст текст текст текст текст текст</td>
        <td data-content="Яндекс.Маркет">Текст текст текст текст текст текст текст текст текст текст</td>
        <td data-content="AliExpress">Текст текст текст текст текст текст текст текст текст текст</td>
    </tr>
    <tr>
        <td data-content="Параметры">Комиссия и условия оплаты</td>
        <td data-content="Wildberries">Текст текст текст текст текст текст текст текст текст текст</td>
        <td data-content="Ozon">Текст текст текст текст текст текст текст текст текст текст</td>
        <td data-content="Яндекс.Маркет">Текст текст текст текст текст текст текст текст текст текст</td>
        <td data-content="AliExpress">Текст текст текст текст текст текст текст текст текст текст</td>
    </tr>
    <tr>
        <td data-content="Параметры">Юридический статус селлеров</td>
        <td data-content="Wildberries">Текст текст текст текст текст текст текст текст текст текст</td>
        <td data-content="Ozon">Текст текст текст текст текст текст текст текст текст текст</td>
        <td data-content="Яндекс.Маркет">Текст текст текст текст текст текст текст текст текст текст</td>
        <td data-content="AliExpress">Текст текст текст текст текст текст текст текст текст текст</td>
    </tr>
    </tbody>
</table>    

Если у вас есть возможность на стороне backend'a добавить заголовки в data-content="" - вам не нужен JS скрипт, достаточно будет только CSS

С помощью jQuery

Если же возможности заполнить дата атрибут со стороны бека у вас нету, тогда вам понадобится скрипт который это сделает

var thCollection = $('.srv-table-wrap thead th')
thCollection.each(function(index) {
    var thContent       = $(this).text(),
        tdCollection    = $('.srv-table-wrap tbody td:nth-child(' + (index + 1) + ')')
    tdCollection.each(function() {
        $(this).attr('data-content', thContent)
    })
})    

CSS для обоих случаев будет следующим (отредактируйте под себя, основная здесь суть это  content: attr(data-content) ": ";  в псевдоэлементе

.srv-table-wrap{
    border: 1px solid #CDD8FB;
    border-radius: 20px;
    overflow: hidden;
    border-spacing: 0;
    margin: 10px 0;
    width: 100%;
}
.srv-table-wrap thead{
    background: #EFF2F9;
}
.srv-table-wrap thead th{
    padding: 40px 40px 20px 40px;
    font-weight: 700;
    font-size: 16px;
    line-height: 110%;
    text-align: left;
    color: #000000;
    border: 0.5px solid #CDD8FB;
}
.srv-table-wrap tbody tr{
    transition: .3s linear all;
}
.srv-table-wrap tbody td{
    padding: 30px 40px;
    font-weight: 400;
    font-size: 14px;
    line-height: 110%;
    color: #000000;
    border: 0.5px solid #CDD8FB;
    text-align: left;
}
.srv-table-wrap tbody tr:nth-child(even){
    background: rgba(239, 242, 249, 0.5);
}
.srv-table-wrap tbody tr:hover{
    background: #EFF2F9;
}
.srv-table-wrap tbody tr td:first-child{
    min-width: 210px;
}
@media (max-width: 1024px){
    .srv-table-wrap thead{display: none;}
    .srv-table-wrap tbody tr,
    .srv-table-wrap tbody tr:hover{
        background: #fff !important;
    }
    .srv-table-wrap tbody tr{
        border-top: 1px solid #000;
        border-bottom: 1px solid #000;
    }
    .srv-table-wrap tbody td{
        display: grid;
        gap: 5px;
        grid-template-columns: minmax(115px, 25%) auto;
        padding: 5px 20px;
        border: none;
    }
    .srv-table-wrap tbody td::before{
        content: attr(data-content) ": ";
        font-weight: 700;
        text-transform: capitalize;
        display: block;
        width: 100%;
        word-break: break-all;
    }
    .srv-table-wrap tbody td:first-child{
        padding-top: 20px;
    }
    .srv-table-wrap tbody td:last-child{
        padding-bottom: 20px;
        border-bottom: 1px solid #CDD8FB;
    }
    .srv-table-wrap tbody tr:last-child td:last-child{
        border-bottom: none;
    }
}    

Результат который должен получится

Если вы замените grid в .srv-table-wrap tbody td  на block, то результат будет следующим