diff --git a/docs/doc-fragments/tables.js b/docs/doc-fragments/tables.js
index 47b4985..b07d6ce 100644
--- a/docs/doc-fragments/tables.js
+++ b/docs/doc-fragments/tables.js
@@ -54,8 +54,8 @@ module.exports = {
</tbody>
</table>`],
notes: [`Remember to always specify a data-label
attribute for all of your <td>
elements, otherwise they will not display properly on mobile.`,
- `Due to the way tables are displayed, the <tfoot>
element is not supported.`,
- `Tables are vertically scrollable by default, with a max-height
property of 400px
.`],
+ `Due to the way tables are displayed, the <tfoot>
element is not supported by default. You can however add table tfoot { order: 3; }
to your CSS files to partially support table footers.`,
+ `Tables are vertically scrollable by default, with a max-height
property of 400px
.`,],
customization: [
`Text color for <th>
and <td>
elements can be changed by changing the values of the --table-head-fore-color
and --table-body-fore-color
variables respectively.`,
`Background color for <th>
and <td>
elements can be changed by changing the values of the --table-head-back-color
and --table-body-back-color
variables respectively.`,
diff --git a/docs/docs.html b/docs/docs.html
index f136043..05b020f 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -789,7 +789,7 @@
</tr>
</tbody>
</table>
Don't: Avoid placing <td>
elements in the <thead>
of your tables, as well as placing <th>
elements in the <tbody>
.
data-label
attribute for all of your <td>
elements, otherwise they will not display properly on mobile.<tfoot>
element is not supported.max-height
property of 400px
.data-label
attribute for all of your <td>
elements, otherwise they will not display properly on mobile.<tfoot>
element is not supported by default. You can however add table tfoot { order: 3; }
to your CSS files to partially support table footers.max-height
property of 400px
.<th>
and <td>
elements can be changed by changing the values of the --table-head-fore-color
and --table-body-fore-color
variables respectively.<th>
and <td>
elements can be changed by changing the values of the --table-head-back-color
and --table-body-back-color
variables respectively.--table-border-color
variable.--table-border-separator-color
variable.<td>
elements in striped tables can be changed by changing the value of the --table-body-alt-back-color
variable.<tr>
elements in hoverable tables can be changed by changing the value of the --table-body-hover-back-color
variable.--universal-margin
variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.--universal-padding
variable.--universal-border-radius
variable.