Table Cell

Every table consists of multiple table cells that are arranged in rows and columns. Table cell styles allow you to define the visual appearance of cells.

Cells can be surrounded by separators, whereas each cell has a row separator on its bottom side and a column separator on its right side. You can define the background colors of cells using the cell-color setting and even define alternative row / column colors using alternate-row-color and alternate-column-color.

There are also various pseudoclasses for styling the headers of a table, such as :header for styling all headers and :header-top for styling all headers bound to the top of the table. You can also style cells that are at the boundary between headers and non-header areas using separator pseudoclasses (e.g. :header-top-boundary or :header-bottom-boundary).

Selectors

• Definitions:

  • table-cell

• See also: Table

Style Settings

See also: Paragraph, Inline

Setting	Type	Examples	Description
alternate-column-color	Color	rgb(0,0,0), #000000	An alternate background color that should be applied on all cells in even numbered column.
alternate-row-color	Color	rgb(0,0,0), #000000	An alternate background color that should be applied on all cells in even numbered rows.
cell-color	Color	rgb(0,0,0), #000000	The background color of a table cell.
padding padding-top padding-left padding-bottom padding-right	Length	0.5em	The padding between a cell’s border and its contents.
separator-color row-separator-color column-separator-color	Color	rgb(0,0,0), #000000	The color of the row and column separator of a table cell.
separator-style row-separator-style column-separator-style	Symbol	solid, none	The styling of the row and column separator of a table cell.
separator-width row-separator-width column-separator-width	Length	0.5em	The width of the row and column separator of a table cell.

Pseudoclasses

See also: Paragraph, Inline

Class	Description
:body	The style will be applied to all cells of a table that are not part of the header.
:header	The style will be applied to all header cells of a table.
:header-bottom	The style will be applied to all header cells are place in the bottommost header rows of the table.
:header-bottom-boundary	The style will be applied to the cells of the row before the bottommost header rows. This is especially useful to style the separator dividing the bottommost header rows and the rest of the table using row-separator-*.
:header-column	The style will be applied to all header cells of a table that form a continuous column.
:header-column-boundary	The style will be applied to all cells that are on the boundary between regular cells and cells around one or multiple header columns. I.e. it will style all cells before the first column and on the last column of any continuous header column area. This is especially useful to style the separators enclosing multiple continuous header columns using column-separator-*.
:header-left	The style will be applied to all header cells are place in the leftmost header columns of the table.
:header-left-boundary	The style will be applied to the cells of the last column among the leftmost header columns. This is especially useful to style the separator dividing the leftmost header columns and the rest of the table using column-separator-*.
:header-right	The style will be applied to all header cells are place in the rightmost header columns of the table.
:header-right-boundary	The style will be applied to the cells of the columns before the rightmost header columns. This is especially useful to style the separator dividing the rightmost header columns and the rest of the table using column-separator-*.
:header-row	The style will be applied to all header cells of a table that form a continuous row.
:header-row-boundary	The style will be applied to all cells that are on the boundary between regular cells and cells around one or multiple header rows. I.e. it will style all cells before the first row and on the last row of any continuous header row area. This is especially useful to style the separators enclosing multiple continuous header rows using row-separator-*.
:header-top	The style will be applied to all header cells are place in the topmost header rows of the table.
:header-top-boundary	The style will be applied to the cells of the lowest row among the topmost headers. This is especially useful to style the separator between the topmost header rows and the rest of the table using row-separator-*.

Example

// Regular cells have a thin separator
table-cell {
  separator-style:    solid
  separator-width:    1pt
}

// Header cells have a grey background
table-cell :header {
  cell-color:         #fafafa
}

// The row separator on the last top header row should be stronger
table-cell :header-top-boundary {
  row-separator-width:  2pt
}