Reader: Add fixed table-layout to tables within full post view

[alexjgustafson]

Fixes #986 , to keep tables from overflowing within Reader's full post view in firefox

Testing instructions:

1. Publish a new post including a table with images in two 50% width colums
2. View the post in the Reader
   Result: the table is not constrained to the content area when the post is viewed in the Reader using Firefox.

Before:

After:

cc: @blowery @designsimply

[blowery]

That seems... dangerous: https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

Under the "fixed" layout method, the entire table can be rendered once the first table row has been downloaded and analyzed. This can speed up rendering time over the "automatic" layout method, but subsequent cell content may not fit in the column widths provided. Any cell that has content that overflows uses the overflow property to determine whether to clip the overflow content.

Why does setting fixed fix the issue? Is there another way we could do it without changing how most tables render?

[alexjgustafson]

The setting defaults to auto, with that in place for our test case, the photos are the widest unbreakable content in their respective columns. The table element has a width:100%; style in place, and each td has a width of 50% in place, but because the photos are the widest unbreakable content the photos set their respective columns width regardless of the table's width. Because of that, it's stretching out the table's cells past the containing .reader__full-post-content div, even though the table has those widths set.

It should be noted this effect occurs in other environments, not just the Reader. Here's the sample HTML provided in the issue in a post in the Twenty Fourteen theme:

The Twenty Fifteen theme handles this issue by using table-layout:fixed for all table elements. Here's the sample HTML provided in the issue in a post in the Twenty Fifteen theme:

Setting table-layout to fixed fixes the issue because the table renders based off the widths set in the tables first row rather than the contents within the table's cells. The content's width then gets handled within the cell as a container, following any overflow rules.

To produce the same effect without using table-layout: fixed I suppose we'd need to make adjustments to the content itself when found within a table. Images seem the most likely element to cause this width issue. Non-wrapping text would cause this effect too, but that happens even when the table-layout is fixed, and seems we handle it in the Reader view already. A table nested within a table may also cause this effect with the right content.

I'll attempt a solution that at least accounts for the image case, and test out how other elements react to see if fixing more than images is necessary.

[blowery]

The odd thing is that is only does it in firefox. I wonder if this is a vague bit of the spec, or if Firefox is getting it wrong..

[alexjgustafson]

I was hoping I could figure out what it is that Chrome and Firefox handle differently by using the same table setup without all the other styles already in Calypso, including normalize/reset styles that are in play. So I started working with this HTML on its own: https://gist.github.com/alexjgustafson/cf3fe38df0d15e52a675

When viewing that HTML alone, the images overflow the table in both Chrome and Firefox, regardless of table-layout. So I think you're right, there must be some other styles we already have in place that Chrome is supporting and Firefox just isn't. Having a hard time tracking down exactly what those are though.

[blowery]

@alexjgustafson Have you had a chance to look at this again?

[alexjgustafson]

@blowery a couple times I've attempted to find other solutions but I'm afraid I'm stumped beyond my original PR.

[lancewillett]

Closing this one as no movement in several months — feel free to re-open if it's actionable and can be pushed in.