具有反向可折叠行的响应式 HTML 表格答案

【问题标题】：Responsive HTML Table with reverse collapsible rows具有反向可折叠行的响应式 HTML 表格
【发布时间】：2020-02-24 21:49:27
【问题描述】：

我有一张这样的表：

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>

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

所以它在移动设备上看起来像这样：

标题
数据
标题
数据

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

【问题讨论】：

你不能将<td> 堆叠在一个<tr> 中，所以如果你有一个带有数据的标题，我认为你需要一个<br> 这样的<td>headline<br>Data</td>

标签： html css html-table responsive-design

【解决方案1】：

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

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

【讨论】：

效果很好！非常感谢。太简单了...已经尝试过了，但忘记了“显示：块”...。：D ...我只将 table 标签用于本地表，所以应该没问题。
@flip 没问题。由于您为所有表修改了<td>。如果您将来在其他地方使用 table，您可能会知道。
我会留意的。祝你有美好的一天

【解决方案2】：

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

【讨论】：