Table component CSS

warning

The content on this page is outdated and will not receive updates. For the most up-to-date functionality, refer to Setting up and managing flows.

This topic provides examples of the main CSS classes/selectors you can use to customize rich text components.

Default player CSS

You can use the following main classes/selectors to apply additional CSS styling to table components in a flow running the default player.

Class/Selector	Description
.table-wrapper	The main class applied to the entire table component top-level <DIV> container. Any classes added using a classes attribute are added to this element.For example, to add padding around the entire table:.table-wrapper {padding:15px}
.table	The main class applied to all tables.For example, to modify the background color of all tables:.table {background-color:#cccccc}
.th	The main class applied to all table header rows.For example, to modify the background color of table header rows:.th {background-color:#cccccc}
.tr	The main class applied to all standard table rows (inclusive of the header row).For example, to modify the background color of standard table rows:.tr {background-color:#cccccc}
.tr:nth-child(n)	Target and format the nth table row (inclusive of the header row).For example, to modify the background color of the second table row:.tr:nth-child(2) {background-color:#cccccc}
.table tr *:nth-child(n)	Target and format the nth table column (inclusive of the header row).For example, to modify the background color of the second table column:.table tr *:nth-child(2) {background-color:#cccccc}
.td	The main class applied to all standard table cells (excluding header and footer row cells)For example, to modify the background color of standard table cells:.td {background-color:#cccccc}
.table td:nth-child(n)	Target and format the nth table column (excluding the header row).For example, to modify the background color of the second table column:.table td *:nth-child(2) {background-color:#cccccc}The n value can also be changed to 'even' or 'odd' instead of a number.For example:.table td*:nth-child(even) {background-color:#cccccc}

Default legacy player CSS

You can use the following classes/selectors to apply additional CSS styling to table components in a flow running the default legacy player.

Class/Selector	Description
.mw-bs .table-container	The main class applied to the entire table component top-level <DIV> container. Any classes added using a classes attribute are added to this element.For example, to add padding around the entire table:.mw-bs .table-container {padding:15px}
.mw-bs .table-responsive	The main class applied to the table <DIV> container that enables a table to scale responsively on different screen sizes and devices.
.mw-bs .table-bordered	The main class applied to the table <TABLE> element. This applies default table borders to a table. If the borderless attribute is added to the table component, this class is removed and vertical borders are not displayed.
.mw-bs table table-striped	If the striped attribute is added to the table component, this class is added to the table <TABLE> element, adding zebra striping to alternate table rows.
.mw-bs table	The main class applied to all tables.For example, to modify the background color of all tables:.mw-bs table {background-color:#cccccc}
.mw-bs th	The main class applied to all table header rows.For example, to modify the background color of table header rows:.mw-bs th {background-color:#cccccc}
.mw-bs tr	The main class applied to all standard table rows (inclusive of the header row).For example, to modify the background color of standard table rows:.mw-bs tr {background-color:#cccccc}
.mw-bs tr:nth-child(n)	Target and format the nth table row (inclusive of the header row).For example, to modify the background color of the second table row:.mw-bs tr:nth-child(2) {background-color:#cccccc}
.mw-bs table tr *:nth-child(n)	Target and format the nth table column (inclusive of the header row).For example, to modify the background color of the second table column:.mw-bs table tr *:nth-child(2) {background-color:#cccccc}
.mw-bs td	The main class applied to all standard table cells (excluding header and footer row cells)For example, to modify the background color of standard table cells:.mw-bs td {background-color:#cccccc}
.mw-bs table td:nth-child(n)	Target and format the nth table column (excluding the header row).For example, to modify the background color of the second table column:.mw-bs table td *:nth-child(2) {background-color:#cccccc}The n value can also be changed to 'even' or 'odd' instead of a number.For example:mw-bs table td*:nth-child(even) {background-color:#cccccc}