Search code examples
csshtml-tableamp-html

AMP and too-wide tables

My blog posts use the <table> tag quite heavily (for tabulated data, not a format hack) but when using AMP on mobile things spill off the edge of the screen relatively frequently, or else things get
over-
word-
wrapped.
Looking around the web, I found this ingenious/ugly hack but I am looking for a better solution; some sort of Bootstrap Carousel might be a possible solution, if it could be done in pure CSS.

Here's a typical screen with the last column chopped off when you narrow the browser window. Note that using a desktop browser the only way to scroll I can see is to select text and drag to the right. On mobile, one can use touch, but there is no UI hint that there is chopped-off data:

enter image description here

Note that I generate the table from raw data in a plugin, so I could re-author the data in some other form if there were a <div>-based solution, for instance.

Solution

  • You can make your tables scrollable horizontally by embedding them into an amp-carousel:

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

    The key is to use the carousel type carousel (it's the default) and to combine it with a fixed-height layout that matches your table's height.

    Here is a working sample on JSBIN.