html - 具有反向可折叠行的响应式 HTML 表格

Question

我有一张看起来像这样的桌子：

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

<div style="overflow-x: auto;">
    <table>
        <tbody>
            <tr>
                <td>Unbefristete Lizenzen</td>
                <td>–&lt;/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>

它可以在移动设备上滚动，并带有一个带有溢出-x 的 div 容器......它看起来真的很难看。我希望行像在带有列的正常响应式布局中那样折叠。

所以它在手机上看起来像这样：

标题
数据
标题
数据

任何想法如何实现这一目标？
提前致谢！

标签： htmlcsshtml-tableresponsive-design

Answer 1

也许你应该通过 CSS 网格意识到这一点。这很干净