语义UI,响应水平表unstackable,单行线,带滚动

2020年9月27日 44点热度 0条评论 来源: John Sam

这是例子:语义UI,响应水平表unstackable,单行线,带滚动

https://plnkr.co/edit/WRXGNFlG1FWrF8rtIVU4?p=preview

您可以调整窗口的大小,看看我的意思是:

  • 桌面模式下的桌面: Table in Desktop Mode

  • 表中移动模式: Table in Mobile mode

我使用display: block上表。正如你所看到的,它适用于手机模式,但不适用于桌面模式。为什么?

我们可以解决这个小问题吗?

===========解决方案如下:

媒体查询

@media (min-width:320px) { table { display: block; } } 
@media (min-width:960px) { table { display: table; } } 

这是一个简单的例子,但你能适应断点为您的特定需求。

表包装

如果你有一个表,太宽,你可以用溢出-X添加一个容器元素:自动围着桌子,并在需要时它会显示一个水平滚动条。调整浏览器窗口大小以查看效果。尝试删除div元素,看看表发生了什么。

分叉您的示例的版本:https://plnkr.co/edit/irZUV08VdBYUemFiMiwI?p=preview

    原文作者:John Sam
    原文地址: https://stackoverflow.com/q/47866605
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。