AMP和太宽的表格

Question

我的博文大量使用<table>标签（对于制表数据，而不是格式黑客）但是在移动设备上使用AMP会相对频繁地溢出屏幕边缘，否则事情会变得很明显> over-
word-
包裹。
环顾网络，我发现this ingenious/ugly hack但我正在寻找更好的解决方案;某种Bootstrap Carousel可能是一种可能的解决方案， if 可以在纯CSS中完成。

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

请注意，我是从插件中的原始数据生成表格的，所以如果有基于<div>的解决方案，我可以用其他形式重新创建数据。

Answer 1

您可以通过将表格嵌入放大器轮播中来水平滚动表格：

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

关键是使用轮播类型carousel（这是默认设置）并将其与符合表格高度的fixed-height布局相结合。

Here是JSBIN的工作示例。