Add readability: fixes 29

[pippinlee]

• left align all cells
• no background colour
• add green for valid options cells
• top align "Validation" cells

[k88hudson]

There are few things you could probably clean up in terms of merging styles together. Also, I think the labels in the heading row are too tall/need to be left aligned

[pippinlee]

Explanation:

tr:nth-child(1) {
  td:nth-child(4) {
    border-top: none;
  }
}
.
.
.
td:nth-child(4) {
  display: block;
  width: 200px;
  border: none
  border-top: 1px solid #DDD;
}

This style targets the last column of the second row. Why do we need it?

This is mainly due to our need to make the last column 200px wide. To do this we need to add display: block to the 4th column.

The way our markdown file is converted to html means that each 4th column cell is a <td> element. The other thing to note is our text isn't within a child element like the other 3 columns are within a <code> element.

When we use display: block this uses the previously defined border for <td> and creates on extra border around all 4th column elements, so when we add a borders: none value we must also add a border-top: 1px solid #DDD value to give the 4th column <td> elements a top border.

The side-effect of this means our 2nd row 4th column cell has an extra 1px border on top. So we must use the above quoted styling to negate this side effect.

This gives us the desired result of good readability in the last column with a width of 200px, while also giving us the proper borders in each of the 4th column cells, and in the first row heading cells.

[k88hudson]

Nice! Last remaining issue is that the th text is still centered. Looking awesome :+1:

[pippinlee]

Oops, sorry. Updated.

[k88hudson]

Thanks!