Info | ||
---|---|---|
| ||
This is a draft, to be enhanced and cleaned up... |
JIRA issue regarding the creation of this page:
Jira Legacy | ||||||||
---|---|---|---|---|---|---|---|---|
|
Basic styling
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
andtd
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 thetable
element itself)
...
- to
width: 100%
andoverflow-x: auto;
...
Caption Positioning
- To position a table's caption, use the
caption-side
...
Complex tables
Styling a complex table
...
- 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 thetable
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.
Code Block | ||||
---|---|---|---|---|
| ||||
/*** 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;
} |