From a99befe0fa8400c35103dc0f8e32321945b3d7a2 Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Sat, 27 Oct 2018 09:42:40 +0300
Subject: [PATCH] Resolve #135

---
 docs/doc-fragments/tables.js | 4 ++--
 docs/docs.html               | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

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 = {
 <span class="code-line"><span class="highlight-a">  &lt;/tbody&gt;</span></span>
 <span class="code-line"><span class="highlight-a">&lt;/table&gt;</span></span></pre>`],
   notes: [`Remember to always specify a <code>data-label</code> attribute for all of your <code>&lt;td&gt;</code> elements, otherwise they will not display properly on mobile.`,
-  `Due to the way tables are displayed, the <code>&lt;tfoot&gt;</code> element is not supported.`,
-  `Tables are vertically scrollable by default, with a <code>max-height</code> property of <code>400px</code>.`],
+  `Due to the way tables are displayed, the <code>&lt;tfoot&gt;</code> element is not supported by default. You can however add <code>table tfoot { order: 3; }</code> to your CSS files to partially support table footers.`,
+  `Tables are vertically scrollable by default, with a <code>max-height</code> property of <code>400px</code>.`,],
   customization: [
     `Text color for <code>&lt;th&gt;</code> and <code>&lt;td&gt;</code> elements can be changed by changing the values of the <code>--table-head-fore-color</code> and <code>--table-body-fore-color</code> variables respectively.`,
     `Background color for <code>&lt;th&gt;</code> and <code>&lt;td&gt;</code> elements can be changed by changing the values of the <code>--table-head-back-color</code> and <code>--table-body-back-color</code> 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 @@
 <span class="code-line"><span class="highlight-a">    &lt;/tr&gt;</span></span>
 <span class="code-line"><span class="highlight-a">  &lt;/tbody&gt;</span></span>
 <span class="code-line"><span class="highlight-a">&lt;/table&gt;</span></span></pre></div><div class="col-sm-12 col-md-6"><p><mark class="dont">Don't:</mark>&nbsp;Avoid placing <code>&lt;td&gt;</code> elements in the <code>&lt;thead&gt;</code> of your tables, as well as placing <code>&lt;th&gt;</code> elements in the <code>&lt;tbody&gt;</code>.</p></div></div></div>
-  <div class="section double-padded"><h3>Notes</h3><ul><li>Remember to always specify a <code>data-label</code> attribute for all of your <code>&lt;td&gt;</code> elements, otherwise they will not display properly on mobile.</li><li>Due to the way tables are displayed, the <code>&lt;tfoot&gt;</code> element is not supported.</li><li>Tables are vertically scrollable by default, with a <code>max-height</code> property of <code>400px</code>.</li></ul></div>
+  <div class="section double-padded"><h3>Notes</h3><ul><li>Remember to always specify a <code>data-label</code> attribute for all of your <code>&lt;td&gt;</code> elements, otherwise they will not display properly on mobile.</li><li>Due to the way tables are displayed, the <code>&lt;tfoot&gt;</code> element is not supported by default. You can however add <code>table tfoot { order: 3; }</code> to your CSS files to partially support table footers.</li><li>Tables are vertically scrollable by default, with a <code>max-height</code> property of <code>400px</code>.</li></ul></div>
   <div class="section double-padded"><h3>Customization</h3><ul><li>Text color for <code>&lt;th&gt;</code> and <code>&lt;td&gt;</code> elements can be changed by changing the values of the <code>--table-head-fore-color</code> and <code>--table-body-fore-color</code> variables respectively.</li><li>Background color for <code>&lt;th&gt;</code> and <code>&lt;td&gt;</code> elements can be changed by changing the values of the <code>--table-head-back-color</code> and <code>--table-body-back-color</code> variables respectively.</li><li>Border color for tables can be changed by changing the value of the <code>--table-border-color</code> variable.</li><li>Border color for the separator between a table's heading and a table's body can be changed by changing the value of the <code>--table-border-separator-color</code> variable.</li><li>Alternative background color for <code>&lt;td&gt;</code> elements in striped tables can be changed by changing the value of the <code>--table-body-alt-back-color</code> variable.</li><li>Hover background color for <code>&lt;tr&gt;</code> elements in hoverable tables can be changed by changing the value of the <code>--table-body-hover-back-color</code> variable.</li><li>Universal margin for elements can be changed globally by changing the value of the <code>--universal-margin</code> 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.</li><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.</li><li>Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.</li></ul></div>
 </div><br/><div id="text-highlighting" class="card fluid">
   <h2 class="section double-padded">Text highlighting</h2>