Question

我在a website平台上构建了Squarespace。使用Squarespace＆＃34;代码块＆＃34;我在this /test page上插入了表格的HTML。该表没有响应。

我希望该表能够在移动设备上显示，就好像它位于<iframe>水平滚动中一样。在屏幕上调整大小，在任何设备上，我需要列不要缩小超过某个点，比如min-width：150px。

我已经搜索了这个网站，并根据条款＆＃34;响应表＆＃34;阅读了近7,000个结果中的许多结果。但似乎没有发现任何看法。我搜索过CSS Tricks但没有发现任何内容，这并不令人惊讶，因为我认为它只能用CSS完成。我当然搜索了Squarespace Answers论坛，但没有找到任何帮助。

我在CodePen上创建了this Pen，其行为与我想要的一样。 Squarespace代码块中的相同HTML不会。

我认为这需要一些我不知道的JavaScript。所以我想知道这里是否有人可以提供帮助。

感谢您关注我的问题。任何帮助当然都会受到赞赏。

Answer 1

发布问题后，我转到了Tables Generator，HTML Tables选项卡，发现它在Extra Options下拉选择器下有一个选项，可以使表响应。该选项生成了一个@media查询，可以解决问题。

我使用的首要标记是：

<div class="schedule-wrapper">
  <table class="schedule">
  ...
  </table>
</div>

我使用的CSS是：

@media only screen
  and (max-width: 1200px) {
    .schedule-wrapper {
      -webkit-overflow-scrolling: touch;
      overflow-x: auto;
      margin: auto 0;
    }
    .schedule {
      width: auto;
    }
}

我修改了笔Table Play以反映这一点，并会将其留下以防万一有人想要它作为参考。

似乎只有CSS才能实现。多酷啊。

如何在＆＃34;代码块中制作表格＆＃34;在我的Squarespace网站上响应？

1 个答案: