Implementation
Classes
| Classes | Description |
|---|---|
| This is added to the <table> element and is the class that sets all default styling for tables in our design system. |
qld__table--scroll | Add the qld__table--scroll class to a container around any qld__table to apply a vertical scrollbar if the columns exceed a maximum height. This is ideal for tables where vertical height is an important. |
qld__table--contained | Add the qld__table--contained class to a container around any qld__table to apply the contained style. |
qld__table__wrapper | Add the qld__table__wrapper class to a container around any qld__table to apply a horizontal scrollbar this should be combined with a specified width. |
| Reduces the row height and vertical spacing to display more table rows within a limited space. Should only be used with dense, numerical data, not text content. Pairs well with scrollable and striped variants, but isn't suitable for use with stacked variants. |
| This class needs to be added to the table <caption> it applies the default heading style for tables. |
| Applies alternating horizontal striping to help the eye track across table rows. Pairs well with the scrollable variant. |
qld__table__cell--numeric | This is an utility class that applies tabular numbers and right align text within a specific cell. |
qld__table__cell--middle | This is an utility class that centre align text within a specific cell. |
qld__table__col-[#]-numreplace [#] with a number 1-10 | This is an utility class that can is appled the the <table> element it will apply tabular numbers and right align text within a specific column. For example the code below applies to all cels in the 4 column from the left. <table class="qld__table qld__table__col-4-num"> |
qld__table__cell-left-border | This is an utility class that add a left border to a specific cell. |
qld__table__cell-right-border | This is an utility class that add a left border to a specific cell. |
qld__table__col-[#]-left-borderrepace [#] with a number 1-10 |
This is an utility class that can is applied the the <table> element it will apply a left border to all cells within a specific column. For example the code below applies to all cels in the 4 column from the left. <table class="qld__table qld__table__col-2-left-border> |
qld__table__col-[#]-right-borderreplace [#] with a number 1-10 | This is an utility class that can is applied the the <table> element it will apply a right biorder to all cells within a specific column. For example the code below applies to all cels in the 4 column from the left. <table class="qld__table qld__table__col-2-right-border> |
| This utility class must be appled to <th>. It will override the default width and set the corresponding col to a width of 10%. |
| This utility class must be appled to <th>. It will override the default width and set the corresponding col to a width of 15%. |
| This utility class must be appled to <th>. It will override the default width and set the corresponding col to a width of 20%. |
| This utility class must be appled to <th>. It will override the default width and set the corresponding col to a width of 25%. |
| This utility class must be appled to <th>. It will override the default width and set the corresponding col to a width of 33%. |
| This utility class must be appled to <th>. It will override the default width and set the corresponding col to a width of 40%. |
| This utility class must be appled to <th>. It will override the default width and set the corresponding col to a width of 50%. |
| This utility class must be appled to <th>. It will override the default width and set the corresponding col to a width of 75%. |