CSS Properties and Styling Tables
You already know a lot of the properties used to style tables as they are the same properties that you would use to style other elements (e.g.,
border, etc.). We are going to look at some properties that are only used for tables:
table-layout property is applied to the
table element. It accepts one of two values:
auto - The default value.
auto makes the widths of the
td elements adjust automatically to fit the content.
width can still be used to make the
table wider, but the
table will never shrink so far that the content doesn't fit.
fixed - If a
fixed, then the first table row determines the size of all the following rows. If they have content that goes wider than the first table row, then the content may wrap, get cut off, or extend outside of the cells depending on how the
whitespace properties are set.
width will override this tendency, and the
table will be whatever
width is set regardless of the content.
border-collapse property is also applied to the
table element. It determines whether or not table cells have separate or shared borders. It takes one of two values:
separate - The default value. When cells have separate borders, the
tr elements all have their own four borders. The spacing between these borders is determined by the
border-spacing property, which only works when
border-collapse is set to
border-spacing takes one or two length values. If one value is specified, it is for both the vertical and horizontal spacing (e.g.,
border-spacing: 0.2rem). If two values are specified, the first one is for the vertical spacing and the second is for the horizontal spacing (e.g.,
border-spacing: 0.2rem 0.1rem).
collapse - If a
table element has its borders collapsed, then the
td elements share borders with each other.
Below you can see a
table with separate borders and a
table with collapsed borders.
Below, you can see our fully styled Great Books table: