Question

我已经尝试解决此问题已有10天了，但仍然找不到任何解决方案。

我有一张桌子可以完美显示在桌面版本上，但是在移动设备上它却超出了页面区域，我还尝试了@media屏幕最大宽度600px来修改桌子的大小，并且隐藏了但仍无法正常工作，我会粘贴下面的代码：

from itertools import combinations, chain
# This returns an iterator
up_to_m_of_n = lambda n, m: chain.from_iterable(combinations(range(n), i)
                                                for i in range(m+1))
# Example:
list(up_to_m_of_n(4, 2))
[(), (0,), (1,), (2,), (3,), (0, 1), (0, 2), (0, 3), (1, 2), (1, 3), (2, 3)]

Answer 1

这是移动设备上的表格的常见问题。目前尚不清楚您是使用表格进行布局还是使用Play和Review链接获得更多的数据行。

如果您将其用于布局，建议改用flexbox布局。
如果您打算在表格中增加行数，则可以将表格用<div>包裹在max-width: 100%; overflow: auto;中，这将使div /表格水平滚动，但不影响表格的布局页。在较小的屏幕上将其与减小的字体大小结合使用，IMO，您将在移动设备上获得漂亮的表格。
有几种方法可以通过使用data-title和<td>上的数据属性（如<th>）来修改表在小屏幕上的呈现方式，该方法复制列标题，因此在小屏幕上，您可以使用::before之类的td::before { content: attr(data-title); }伪元素提取数据属性，并告诉您所有的表元素均为display: block;并对其样式进行设置，就像每一行都是它自己的表一样。
这是CSS技巧的示例：https://css-tricks.com/responsive-data-tables/

Answer 2

您必须确定它在手机上的外观。最简单的解决方法是在表格上设置最小宽度，但这可能会使移动设备的尺寸变小。您还应该使用媒体查询来使按钮变小，它们很大。

table { min-width: 500px; }

Answer 3

在overflow-x:auto周围添加带有<table>的容器元素，例如：

<div style="overflow-x:auto;">
     <table>
         ...
     </table>
</div>

如果屏幕太小而无法显示全部内容，则此表将显示水平滚动条。

Answer 4

感谢您的所有反馈。

我使用以下测试程序自行修复：

@media only screen and (max-width: 800px) { ... }

在我的网站的移动版本上显示表格时出现问题

4 个答案: