Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix table layout in posts (forem#429)
Three rules overriding table and cell defaults reduce readability of tables by 1. forcing full width irrespective of actual table contents, and 2. setting an arbitrary width of 1000px on each cell. This seems to be the result of tinkering to improve table aesthetics by filling horizontal space, but this is a common error that seriously [degrades the readability of tabular data](https://alistapart.com/article/web-typography-tables#section2). The first issue above is a bit confused: the width has been set to `100%`, and display has been set to `block`. Setting a default table to 100% width will cause the children to adapt accordingly, achieving the desired result. But changing `table` to `block` breaks the relationship so that the children of the table no longer adapt to the full width. (They behave as though an anonymous parent table of the correct display type has been inserted, while the `table` element behaves like a generic block level element. They no longer will the table, though the table is technically full width.) This probably explains the arbitrary width on data cells. It's set larger than the container, forcing the browser to resolve it against the available space and thus approximate the expected result of a default table with 100% width. Rather than trying to fill horizontal space, it's better for readability to allow data cells to adapt to the size of their contents. A better option for aesthetics in blog posts on Dev.to is to remove the three rules deleted here that affect table layout and instead set left and right margins to `auto`, so that narrow tables are centered in posts, but wide tables can still extend beyond the normal content width of paragraphs as they do now.
- Loading branch information