如何在我的“代码块”中使表格 Squarespace 网站响应式

How can I make a table in a "code block" on my Squarespace site responsive?

本文关键字：表格 Squarespace 网站 响应 代码块 我的 代码      更新时间：2023-09-26

我有一个建立在Squarespace平台上的网站。使用Squarespace"代码块"，我在此/test页面上插入了表格的HTML。表无响应。

我希望表格在移动设备上显示，就像在水平滚动的<iframe>中一样。在屏幕上缩小大小，在任何设备上，我都需要列不要缩小到某个点以上，比如最小宽度：150px。

我搜索了这个网站，并阅读了近 7,000 个关于术语"响应表"的结果中的许多，但没有发现任何似乎正确的内容。我搜索了CSS Tricks，但一无所获，这并不奇怪，因为我认为它不能仅使用CSS来完成。我当然搜索了Squarespace Answers论坛，但没有找到任何帮助。

我在CodePen上创建了这支笔，它的行为就像我想要的那样。Squarespace 代码块中的相同 HTML 则不然。

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

感谢您对我的问题感兴趣。当然，任何帮助将不胜感激。

发布问题后，我转到了"表格生成器"，即"HTML表格"选项卡，发现它在"额外选项"下拉选择器下有一个选项，可以使表格响应。该选项生成了一个@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;
    }
}

我修改了笔桌游戏以反映这一点，并保留它以备

不时之需。事实证明

，它只能用CSS来实现。多么酷。

相关文章：