AMP 和太宽的表格

Question

我的博文大量使用 <table> 标签（用于表格数据，而不是格式修改），但在移动设备上使用 AMP 时，内容会相对频繁地溢出屏幕边缘，否则内容会
over-
word-
wrapped.
环顾网络，我发现 this ingenious/ugly hack but I am looking for a better solution; some sort of Bootstrap Carousel 可能是一个可能的解决方案，if 它可以在纯 CSS.

中完成

这是一个 typical screen，当您缩小浏览器 window 时，最后一列被截掉了。请注意，使用桌面浏览器，我可以看到的唯一滚动方式是 select 文本并向右拖动。在移动设备上，可以使用触摸，但没有UI提示有被截断的数据：

请注意，我从插件中的原始数据生成 table，因此如果有基于 <div> 的解决方案，我可以以其他形式重新编写数据。

Answer 1

您可以通过将 table 嵌入 amp-carousel 来使其水平滚动：

 <amp-carousel height="300" layout="fixed-height" type="carousel">
   <table class="result">...</table>
  </amp-carousel>

关键是使用轮播类型 carousel（这是默认设置）并将其与与您的 table 身高相匹配的 fixed-height 布局相结合。

Here 是 JSBIN 上的工作示例。