Styling Tables Created in the Page Editor

There are some important considerations that should be taken in to account when writing CSS styling for Page Styles.

Styling rules for basic and complex tables are listed below.

Basic Table Styling

When styling a basic table, the following rules should be followed:

Cell Padding

• Do not use HTML to define cell padding.
• Instead, use CSS padding on th and td elements. 

Horizontal Scrolling

• In some instances, the viewport of a device or webpage is too narrow to fit the entire table. In these cases, horizontal scrolling must be enabled.
• To enable horizontal scrolling, set the table field div (not the table element itself) to width: 100%  and overflow-x: auto;

Caption Positioning

• To position a table's caption, use the caption-side element.
  

Complex Tables

Some tables use complex styling to achieve a certain display goal.

For example: a table that only displays borders between rows that are not adjacent to a cell that spans multiple rows.

To achieve this complex styling, the following rules should be used:

• border-collapse: collapse; should be applied to the table selector.
• The scope="row" attribute should be used to target the first cells of partial rows (cells next to the cells that span multiple rows).

In this example, some borders are hidden by:

• Setting some cells' border colour to the exact same colour as background of the table.
•  Using the z-index property to force some rows to sit on top of the border of another cell.
  • This is only possible when border collapsing is applied to the table.

/*** Tables ***/
.field.table {
    width: 100%;
    overflow-x: auto;
}
table {
    border-collapse: collapse;
}
table caption {
    caption-side: bottom;
    border-top: 1px solid black;
    font-style: italic;
    font-size: smaller;
}
th, td {
    padding: 5px;
}
table thead th {
    background: #758aba;
    color: #fff;
}
tbody tr:not(:first-child) {
    border-top: 1px solid black;
}
tbody th[rowspan], td[rowspan] {
    background: white;
    z-index: 10;
}
th[rowspan]~td:not([rowspan]) {
    border-bottom: 1px solid white;
}
td[scope]:first-child, td[scope]:first-child~td {
    border-top: 1px solid white;
}