Skip to content

Commit

Permalink
Fix table layout in posts (forem#429)
Browse files Browse the repository at this point in the history
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
denmch authored and benhalpern committed Sep 13, 2018
1 parent dd32580 commit cf15295
Showing 1 changed file with 1 addition and 4 deletions.
5 changes: 1 addition & 4 deletions app/assets/stylesheets/article-show.scss
Original file line number Diff line number Diff line change
Expand Up @@ -541,10 +541,8 @@ header{
table{
font-family: $helvetica;
border-collapse: collapse;
width:100%;
font-size:0.78em;
margin:0.8em 0 1.2em;
display:block;
margin:0.8em auto 1.2em;
table-layout: fixed;
@media screen and ( min-width: 500px ){
font-size:0.9em;
Expand All @@ -558,7 +556,6 @@ header{
td{
border: 1px solid $light-medium-gray;
padding:5px 1vw;
width:1000px;
box-sizing: border-box;
}
}
Expand Down

0 comments on commit cf15295

Please sign in to comment.