我创建了一个代码沙箱来重现我的问题here。这是当有足够空间显示所有列时的表:
这是没有足够空间容纳全宽时的表格:
你可以向右滚动到第8和第9个法术位,但是职业等级和熟练度加成在左边被切断了。我想保持这些栏不被切断。我该怎么做才能修复它,使所有的栏都可以滚动到?
dm7nw8vv1#
如果您有一个包含多个列的表,并且当屏幕尺寸很小时,该表不适合屏幕,则可以使用table-responsive类使该表在小屏幕上可水平滚动。
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
3xiyfsfu2#
我想出了一个办法。首先,我使窗体具有position: relative。然后,我给出了.levelsleft: 20rem。最后,我做了一堆媒体查询,以应用在其他屏幕大小的修复:
position: relative
.levels
left: 20rem
@media screen and (min-width: 512px) { .levels { left: 15rem; } } @media screen and (min-width: 768px) { .levels { left: 10rem; } } @media screen and (min-width: 1024px) { .levels { left: 4rem; } } @media screen and (min-width: 1280px) { .levels { left: 11rem; } } @media screen and (min-width: 1536px) { .levels { left: 8.5rem; } } @media screen and (min-width: 1792px) { .levels { left: 4.6rem; } } @media screen and (min-width: 2048px) { .levels { left: 0; } }
2条答案
按热度按时间dm7nw8vv1#
如果您有一个包含多个列的表,并且当屏幕尺寸很小时,该表不适合屏幕,则可以使用table-responsive类使该表在小屏幕上可水平滚动。
3xiyfsfu2#
我想出了一个办法。
首先,我使窗体具有
position: relative
。然后,我给出了
.levels
left: 20rem
。最后,我做了一堆媒体查询,以应用在其他屏幕大小的修复: