具有反向可折叠行的响应式 HTML Table

Question

我有一个 table 看起来像这样：

<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

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

Answer 2

添加断点并更改 <td> 样式，但这有点棘手。这可能会导致其他问题，具体取决于您使用 <table> 的方式，但如果您只是天真地使用 table 应该没问题。

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

具有反向可折叠行的响应式 HTML Table

Responsive HTML Table with reverse collapsible rows

html

css

html-table

responsive-design