Skip to content

Commit cf15295

Browse files
denmchbenhalpern
authored andcommitted
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.
1 parent dd32580 commit cf15295

File tree

1 file changed

+1
-4
lines changed

1 file changed

+1
-4
lines changed

app/assets/stylesheets/article-show.scss

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -541,10 +541,8 @@ header{
541541
table{
542542
font-family: $helvetica;
543543
border-collapse: collapse;
544-
width:100%;
545544
font-size:0.78em;
546-
margin:0.8em 0 1.2em;
547-
display:block;
545+
margin:0.8em auto 1.2em;
548546
table-layout: fixed;
549547
@media screen and ( min-width: 500px ){
550548
font-size:0.9em;
@@ -558,7 +556,6 @@ header{
558556
td{
559557
border: 1px solid $light-medium-gray;
560558
padding:5px 1vw;
561-
width:1000px;
562559
box-sizing: border-box;
563560
}
564561
}

0 commit comments

Comments
 (0)