Отзывчивая HTML-таблица с обратными складными строками

Question

У меня есть таблица, похожая на эту:

https://imgur.com/a/0oRovYB

<div style="overflow-x: auto;">
    <table>
        <tbody>
            <tr>
                <td>Unbefristete Lizenzen</td>
                <td>–</td>
            </tr>
            <tr>
                <td>Abo-Lizenzen</td>
                <td>Als monatliche und jährliche Subscription</td>
            </tr>
            <tr>
                <td>Lizenzierung</td>
                <td>Pro User</td>
            </tr>
        </tbody>
    </table>
</div>

Она сделана с возможностью прокрутки на мобильном телефоне с контейнером div вокруг нее с overflow-x ... выглядит действительнонекрасиво. Я хотел бы, чтобы строки свернулись, как это было бы в обычном адаптивном макете со столбцами

Итак, на мобильном телефоне это будет выглядеть так:

Заголовок
Данные
Заголовок
Данные

Есть идеи, как этого добиться?
Заранее спасибо!

Answer 1

Добавьте точку останова и измените стиль <td>, но это немного сложно. Это может вызвать другие проблемы в зависимости от того, как вы используете <table>, но это будет хорошо, если вы будете использовать таблицу только наивно.

@media only screen and (max-width: 567px) {
  	td { 
        width:100%;
        display:block;
    	}
    }

Answer 2

Может быть, вы должны понять это с помощью сетки CSS. Это делает трюк чисто