如何使我的 Squarespace 网站上 "code block" 中的 table 响应？

Question

我有a website built on the Squarespace platform. Using a Squarespace "code block" I inserted the HTML for a table on this /test page。 table 没有响应。

我希望 table 在移动设备上显示时就像在水平滚动的 <iframe> 中一样。在屏幕缩小时，无论在什么设备上，我都需要列不要缩小到超过某个点，比如 min-width: 150px.

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

我在 CodePen 上创建了 this Pen，它的行为符合我的要求。 Squarespace 代码块中的相同 HTML 不会。

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

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

Answer 1

发布问题后，我转到 Tables Generator，HTML 表格选项卡，发现它有一个选项，在额外选项下拉选择器下，使 [=28= 】有求必应。该选项生成了一个 @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 才可行。好帅

如何使我的 Squarespace 网站上 "code block" 中的 table 响应？

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

javascript

html-table

responsive-design

responsive