• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

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

css 来源:John Sam 6次浏览

这是例子:语义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


版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)