Documented table module

dist/mini-default.css

@@ -1458,6 +1458,7 @@ table.horizontal thead tr:first-child th:last-child {
     clip-path: inset(100%);
   }
   table tbody, table.horizontal tbody {
+    border: 0;
     display: table-row-group;
   }
   table tr, table.horizontal tr {

docs/doc-fragments/docFragments.js

@@ -14,6 +14,7 @@ var header = require('./header');
 var navigationBar = require('./navigationBar');
 var footer = require('./footer');
 var drawer = require('./drawer');
+var tables = require('./tables');
 var textHighlighting = require('./textHighlighting');
 var toasts = require('./toasts');
 var tooltips = require('./tooltips');
@@ -28,6 +29,7 @@ module.exports = [
   grid, cards, cardSections,
   formsAndInput, buttons, inputGrouping,
   header, navigationBar, footer, drawer,
+  tables,
   textHighlighting, toasts, tooltips, modalDialogs, spoilersAndAccordions,
   progressBars, donutSpinners
 ]

docs/doc-fragments/tables.js

@@ -0,0 +1,208 @@
+module.exports = {
+  id: 'tables',
+  title: 'Tables',
+  keywords: [`table`, `caption`, `thead`, `tbody`, `tr`, `th`, `td`, `horizontal`, `striped`, `hoverable`],
+  description: `<p>Tables are styled in a minimal, modern and responsive manner, allowing users on all devices to easily browse tabular data, taking advantage of the <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank">Flexbox layout</a>'s capabilities. To make tabular data properly display on mobile devices, remember to specify a <code>data-label</code> attribute for each <code>&lt;&gt;</code> element (usually same as the heading of the column).</p>`,
+  example: `<h6 style="text-align:center">Desktop view</h6>
+  <table class="doc"><caption  class="doc">People</caption>
+<thead class="doc"><tr class="doc"><th class="doc">Name</th><th class="doc">Surname</th><th class="doc">Alias</th></tr></thead>
+<tbody class="doc">
+<tr class="doc"><td data-label="Name" class="doc">Chad</td><td data-label="Surname" class="doc">Wilberts</td><td data-label="Alias" class="doc">MrOne</td></tr>
+<tr class="doc"><td data-label="Name" class="doc">Adam</td><td data-label="Surname" class="doc">Smith</td><td data-label="Alias" class="doc">TheSmith</td></tr>
+<tr class="doc"><td data-label="Name" class="doc">Sophia</td><td data-label="Surname" class="doc">Canderson</td><td data-label="Alias" class="doc">Candee</td></tr>
+<tr class="doc"><td data-label="Name" class="doc">Nick</td><td data-label="Surname" class="doc">Thomson</td><td data-label="Alias" class="doc">NickThom</td></tr>
+<tr class="doc"><td data-label="Name" class="doc">Mark</td><td data-label="Surname" class="doc">Gerkis</td><td data-label="Alias" class="doc">Markie</td></tr>
+<tr class="doc"><td data-label="Name" class="doc">John</td><td data-label="Surname" class="doc">Fergusson</td><td data-label="Alias" class="doc">Fergujohn</td></tr>
+<tr class="doc"><td data-label="Name" class="doc">Sylvia</td><td data-label="Surname" class="doc">Pouleau</td><td data-label="Alias" class="doc">Sylver</td></tr>
+<tr class="doc"><td data-label="Name" class="doc">Norman</td><td data-label="Surname" class="doc">Jones</td><td data-label="Alias" class="doc">NormalJones</td></tr>
+<tr class="doc"><td data-label="Name" class="doc">Trevor</td><td data-label="Surname" class="doc">Heidel</td><td data-label="Alias" class="doc">Heidi</td></tr>
+</tbody>
+</table><br/><h6 style="text-align:center">Mobile view</h6>
+<table class="doc cardized"><caption  class="doc">People</caption>
+<thead class="doc"><tr class="doc"><th class="doc">Name</th><th class="doc">Surname</th><th class="doc">Alias</th></tr></thead>
+<tbody class="doc">
+<tr class="doc"><td data-label="Name" class="doc">Chad</td><td data-label="Surname" class="doc">Wilberts</td><td data-label="Alias" class="doc">MrOne</td></tr>
+<tr class="doc"><td data-label="Name" class="doc">Adam</td><td data-label="Surname" class="doc">Smith</td><td data-label="Alias" class="doc">TheSmith</td></tr>
+<tr class="doc"><td data-label="Name" class="doc">Sophia</td><td data-label="Surname" class="doc">Canderson</td><td data-label="Alias" class="doc">Candee</td></tr>
+</tbody>
+</table>`,
+  samples: [`<pre><span class="code-line"><span class="highlight-a">&lt;table&gt;</span></span>
+<span class="code-line"><span class="highlight-a">  &lt;caption&gt;</span>People<span class="highlight-a">&lt;/caption&gt;</span></span>
+<span class="code-line"><span class="highlight-a">  &lt;thead&gt;</span></span>
+<span class="code-line"><span class="highlight-a">    &lt;tr&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;th&gt;</span>Name<span class="highlight-a">&lt;/th&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;th&gt;</span>Surname<span class="highlight-a">&lt;/th&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;th&gt;</span>Alias<span class="highlight-a">&lt;/th&gt;</span></span>
+<span class="code-line"><span class="highlight-a">    &lt;/tr&gt;</span></span>
+<span class="code-line"><span class="highlight-a">  &lt;/thead&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;tr&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">&quot;Name&quot;</span><span class="highlight-a">&gt;</span>Chad<span class="highlight-a">&lt;/td&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">&quot;Surname&quot;</span><span class="highlight-a">&gt;</span>Wilberts<span class="highlight-a">&lt;/td&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">&quot;Alias&quot;</span><span class="highlight-a">&gt;</span>MrOne<span class="highlight-a">&lt;/td&gt;</span></span>
+<span class="code-line"><span class="highlight-a">    &lt;/tr&gt;</span></span>
+<span class="code-line"><span class="highlight-a">    &lt;tr&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">&quot;Name&quot;</span><span class="highlight-a">&gt;</span>Adam<span class="highlight-a">&lt;/td&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">&quot;Surname&quot;</span><span class="highlight-a">&gt;</span>Smith<span class="highlight-a">&lt;/td&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">&quot;Alias&quot;</span><span class="highlight-a">&gt;</span>TheSmith<span class="highlight-a">&lt;/td&gt;</span></span>
+<span class="code-line"><span class="highlight-a">    &lt;/tr&gt;</span></span>
+<span class="code-line"><span class="highlight-a">    &lt;tr&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">&quot;Name&quot;</span><span class="highlight-a">&gt;</span>Sophia<span class="highlight-a">&lt;/td&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">&quot;Surname&quot;</span><span class="highlight-a">&gt;</span>Canderson<span class="highlight-a">&lt;/td&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">&quot;Alias&quot;</span><span class="highlight-a">&gt;</span>Candee<span class="highlight-a">&lt;/td&gt;</span></span>
+<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>`],
+  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>.`],
+  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.`,
+    `Border color for tables can be changed by changing the value of the <code>--table-border-color</code> variable.`,
+    `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.`,
+    `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.`,
+    `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.`,
+    `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.`,
+    `Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.`,
+    `Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.`
+  ],
+  modifiers: [
+    {
+      title : 'Horizontal tables',
+      description: `<p>You can create horizontal tables (<code>.horizontal</code>), by applying the appropriate class.</p>`,
+      example: `<table class="doc horizontal"><caption  class="doc">People</caption>
+      <thead class="doc"><tr class="doc"><th class="doc">Name</th><th class="doc">Surname</th><th class="doc">Alias</th></tr></thead>
+      <tbody class="doc">
+      <tr class="doc"><td data-label="Name" class="doc">Chad</td><td data-label="Surname" class="doc">Wilberts</td><td data-label="Alias" class="doc">MrOne</td></tr>
+      <tr class="doc"><td data-label="Name" class="doc">Adam</td><td data-label="Surname" class="doc">Smith</td><td data-label="Alias" class="doc">TheSmith</td></tr>
+      <tr class="doc"><td data-label="Name" class="doc">Sophia</td><td data-label="Surname" class="doc">Canderson</td><td data-label="Alias" class="doc">Candee</td></tr>
+      </tbody>
+      </table>`,
+      samples: [`<pre><span class="code-line"><span class="highlight-a">&lt;table</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;horizontal&quot;</span><span class="highlight-a">&gt;</span></span>
+<span class="code-line"><span class="highlight-a">  &lt;caption&gt;</span>People<span class="highlight-a">&lt;/caption&gt;</span></span>
+<span class="code-line"><span class="highlight-a">  &lt;thead&gt;</span></span>
+<span class="code-line"><span class="highlight-a">    &lt;tr&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;th&gt;</span>Name<span class="highlight-a">&lt;/th&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;th&gt;</span>Surname<span class="highlight-a">&lt;/th&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;th&gt;</span>Alias<span class="highlight-a">&lt;/th&gt;</span></span>
+<span class="code-line"><span class="highlight-a">    &lt;/tr&gt;</span></span>
+<span class="code-line"><span class="highlight-a">  &lt;/thead&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;tr&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">&quot;Name&quot;</span><span class="highlight-a">&gt;</span>Chad<span class="highlight-a">&lt;/td&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">&quot;Surname&quot;</span><span class="highlight-a">&gt;</span>Wilberts<span class="highlight-a">&lt;/td&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">&quot;Alias&quot;</span><span class="highlight-a">&gt;</span>MrOne<span class="highlight-a">&lt;/td&gt;</span></span>
+<span class="code-line"><span class="highlight-a">    &lt;/tr&gt;</span></span>
+<span class="code-line"><span class="highlight-a">    &lt;tr&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">&quot;Name&quot;</span><span class="highlight-a">&gt;</span>Adam<span class="highlight-a">&lt;/td&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">&quot;Surname&quot;</span><span class="highlight-a">&gt;</span>Smith<span class="highlight-a">&lt;/td&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">&quot;Alias&quot;</span><span class="highlight-a">&gt;</span>TheSmith<span class="highlight-a">&lt;/td&gt;</span></span>
+<span class="code-line"><span class="highlight-a">    &lt;/tr&gt;</span></span>
+<span class="code-line"><span class="highlight-a">    &lt;tr&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">&quot;Name&quot;</span><span class="highlight-a">&gt;</span>Sophia<span class="highlight-a">&lt;/td&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">&quot;Surname&quot;</span><span class="highlight-a">&gt;</span>Canderson<span class="highlight-a">&lt;/td&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">&quot;Alias&quot;</span><span class="highlight-a">&gt;</span>Candee<span class="highlight-a">&lt;/td&gt;</span></span>
+<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>`]
+    },
+    {
+      title : 'Striped tables',
+      description: `<p>You can create striped tables (<code>.striped</code>), by applying the appropriate class.</p>`,
+      example: `<table class="doc striped"><caption  class="doc">People</caption>
+      <thead class="doc"><tr class="doc"><th class="doc">Name</th><th class="doc">Surname</th><th class="doc">Alias</th></tr></thead>
+      <tbody class="doc">
+      <tr class="doc"><td data-label="Name" class="doc">Chad</td><td data-label="Surname" class="doc">Wilberts</td><td data-label="Alias" class="doc">MrOne</td></tr>
+      <tr class="doc"><td data-label="Name" class="doc">Adam</td><td data-label="Surname" class="doc">Smith</td><td data-label="Alias" class="doc">TheSmith</td></tr>
+      <tr class="doc"><td data-label="Name" class="doc">Sophia</td><td data-label="Surname" class="doc">Canderson</td><td data-label="Alias" class="doc">Candee</td></tr>
+      </tbody>
+      </table>`,
+      samples: [`<pre><span class="code-line"><span class="highlight-a">&lt;table</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;striped&quot;</span><span class="highlight-a">&gt;</span></span>
+<span class="code-line"><span class="highlight-a">  &lt;caption&gt;</span>People<span class="highlight-a">&lt;/caption&gt;</span></span>
+<span class="code-line"><span class="highlight-a">  &lt;thead&gt;</span></span>
+<span class="code-line"><span class="highlight-a">    &lt;tr&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;th&gt;</span>Name<span class="highlight-a">&lt;/th&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;th&gt;</span>Surname<span class="highlight-a">&lt;/th&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;th&gt;</span>Alias<span class="highlight-a">&lt;/th&gt;</span></span>
+<span class="code-line"><span class="highlight-a">    &lt;/tr&gt;</span></span>
+<span class="code-line"><span class="highlight-a">  &lt;/thead&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;tr&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">&quot;Name&quot;</span><span class="highlight-a">&gt;</span>Chad<span class="highlight-a">&lt;/td&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">&quot;Surname&quot;</span><span class="highlight-a">&gt;</span>Wilberts<span class="highlight-a">&lt;/td&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">&quot;Alias&quot;</span><span class="highlight-a">&gt;</span>MrOne<span class="highlight-a">&lt;/td&gt;</span></span>
+<span class="code-line"><span class="highlight-a">    &lt;/tr&gt;</span></span>
+<span class="code-line"><span class="highlight-a">    &lt;tr&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">&quot;Name&quot;</span><span class="highlight-a">&gt;</span>Adam<span class="highlight-a">&lt;/td&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">&quot;Surname&quot;</span><span class="highlight-a">&gt;</span>Smith<span class="highlight-a">&lt;/td&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">&quot;Alias&quot;</span><span class="highlight-a">&gt;</span>TheSmith<span class="highlight-a">&lt;/td&gt;</span></span>
+<span class="code-line"><span class="highlight-a">    &lt;/tr&gt;</span></span>
+<span class="code-line"><span class="highlight-a">    &lt;tr&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">&quot;Name&quot;</span><span class="highlight-a">&gt;</span>Sophia<span class="highlight-a">&lt;/td&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">&quot;Surname&quot;</span><span class="highlight-a">&gt;</span>Canderson<span class="highlight-a">&lt;/td&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">&quot;Alias&quot;</span><span class="highlight-a">&gt;</span>Candee<span class="highlight-a">&lt;/td&gt;</span></span>
+<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>`]
+  },
+{
+  title : 'Hoverable tables',
+  description: `<p>You can create hoverable tables (<code>.hoverable</code>), by applying the appropriate class.</p>`,
+  example: `<table class="doc hoverable"><caption  class="doc">People</caption>
+  <thead class="doc"><tr class="doc"><th class="doc">Name</th><th class="doc">Surname</th><th class="doc">Alias</th></tr></thead>
+  <tbody class="doc">
+  <tr class="doc"><td data-label="Name" class="doc">Chad</td><td data-label="Surname" class="doc">Wilberts</td><td data-label="Alias" class="doc">MrOne</td></tr>
+  <tr class="doc"><td data-label="Name" class="doc">Adam</td><td data-label="Surname" class="doc">Smith</td><td data-label="Alias" class="doc">TheSmith</td></tr>
+  <tr class="doc"><td data-label="Name" class="doc">Sophia</td><td data-label="Surname" class="doc">Canderson</td><td data-label="Alias" class="doc">Candee</td></tr>
+  </tbody>
+  </table>`,
+  samples: [`<pre><span class="code-line"><span class="highlight-a">&lt;table</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;hoverable&quot;</span><span class="highlight-a">&gt;</span></span>
+<span class="code-line"><span class="highlight-a">  &lt;caption&gt;</span>People<span class="highlight-a">&lt;/caption&gt;</span></span>
+<span class="code-line"><span class="highlight-a">  &lt;thead&gt;</span></span>
+<span class="code-line"><span class="highlight-a">    &lt;tr&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;th&gt;</span>Name<span class="highlight-a">&lt;/th&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;th&gt;</span>Surname<span class="highlight-a">&lt;/th&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;th&gt;</span>Alias<span class="highlight-a">&lt;/th&gt;</span></span>
+<span class="code-line"><span class="highlight-a">    &lt;/tr&gt;</span></span>
+<span class="code-line"><span class="highlight-a">  &lt;/thead&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;tr&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">&quot;Name&quot;</span><span class="highlight-a">&gt;</span>Chad<span class="highlight-a">&lt;/td&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">&quot;Surname&quot;</span><span class="highlight-a">&gt;</span>Wilberts<span class="highlight-a">&lt;/td&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">&quot;Alias&quot;</span><span class="highlight-a">&gt;</span>MrOne<span class="highlight-a">&lt;/td&gt;</span></span>
+<span class="code-line"><span class="highlight-a">    &lt;/tr&gt;</span></span>
+<span class="code-line"><span class="highlight-a">    &lt;tr&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">&quot;Name&quot;</span><span class="highlight-a">&gt;</span>Adam<span class="highlight-a">&lt;/td&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">&quot;Surname&quot;</span><span class="highlight-a">&gt;</span>Smith<span class="highlight-a">&lt;/td&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">&quot;Alias&quot;</span><span class="highlight-a">&gt;</span>TheSmith<span class="highlight-a">&lt;/td&gt;</span></span>
+<span class="code-line"><span class="highlight-a">    &lt;/tr&gt;</span></span>
+<span class="code-line"><span class="highlight-a">    &lt;tr&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">&quot;Name&quot;</span><span class="highlight-a">&gt;</span>Sophia<span class="highlight-a">&lt;/td&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">&quot;Surname&quot;</span><span class="highlight-a">&gt;</span>Canderson<span class="highlight-a">&lt;/td&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">&quot;Alias&quot;</span><span class="highlight-a">&gt;</span>Candee<span class="highlight-a">&lt;/td&gt;</span></span>
+<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>`]
+  }
+  ],
+  dos: [],
+  donts: [
+    {
+      description: `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>.`,
+      sample: `<pre><span class="code-line"><span class="highlight-a">&lt;table&gt;</span></span>
+<span class="code-line"><span class="highlight-a">  &lt;caption&gt;</span>People<span class="highlight-a">&lt;/caption&gt;</span></span>
+<span class="code-line"><span class="highlight-a">  &lt;thead&gt;</span></span>
+<span class="code-line"><span class="highlight-a">    &lt;tr&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;td&gt;</span>Bad idea<span class="highlight-a">&lt;/td&gt;</span></span>
+<span class="code-line"><span class="highlight-a">    &lt;/tr&gt;</span></span>
+<span class="code-line"><span class="highlight-a">  &lt;/thead&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;tr&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;th</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">&quot;Bad&quot;</span><span class="highlight-a">&gt;</span>Also bad idea<span class="highlight-a">&lt;/th&gt;</span></span>
+<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>`
+    }
+  ]
+}

docs/v3/DEVLOG.md

@@ -268,3 +268,4 @@
 
 - Updated tables, variables cleanup.
 - Added `.striped` and `.hoverable` `table` styles.
+- Documented `table` module.

src/flavors/mini-doc.scss

@@ -498,3 +498,181 @@ header.row a span {
 //     padding: 0 6px;
 //   }
 // }
+@media screen and (max-width: #{$table-mobile-breakpoint - 1px}){
+  table.doc {
+    border-collapse: separate;
+    border-spacing: 0;
+    margin: 0;
+    display: flex;
+    flex: 0 1 auto;
+    flex-flow: row wrap;
+    padding: var(#{$universal-padding-var});
+    padding-top: 0;
+    @if not($_include-horizontal-table) {
+      overflow: auto;
+      max-height: $table-max-height;
+    }
+    caption {
+      font-size: $table-caption-font-size;
+      margin: calc(2 * var(#{$universal-margin-var})) 0;
+      max-width: 100%;
+      flex: 0 0 100%;
+    }
+    thead, tbody {
+      display: flex;
+      flex-flow: row wrap;
+      border: $__1px solid var(#{$table-border-color-var});
+      @if not($_include-horizontal-table) {
+        max-width: 100%;
+        flex: 0 0 100%;
+      }
+    }
+    thead {
+      z-index: 999;  // Fixes the visibility of the element.
+      border-radius: var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0 0;
+      border-bottom: $__1px solid var(#{$table-border-separator-color-var});
+      @if not($_include-horizontal-table) {
+        position: sticky;
+        top: 0;
+      }
+    }
+    tbody {
+      border-top: 0;
+      margin-top: calc(0 - var(#{$universal-margin-var}));
+      border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius);
+    }
+    tr {
+      display: flex;
+      padding: 0; // Apply always to overwrite default.
+      @if not($_include-horizontal-table) {
+        flex-flow: row wrap;
+        flex: 0 0 100%;
+      }
+    }
+    th, td {
+      padding: calc(2 * var(#{$universal-padding-var}));    // Apply always to overwrite default.
+      @if not($_include-horizontal-table) {
+        flex: 1 0 0%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+    th {
+      text-align: left;
+      background: var(#{$table-th-back-color-var});
+      color: var(#{$table-th-fore-color-var});
+    }
+    td {
+      background: var(#{$table-td-back-color-var});
+      color: var(#{$table-td-fore-color-var});
+      border-top: $__1px solid var(#{$table-border-color-var});
+    }
+    @if not($_include-horizontal-table) {
+      tbody tr:first-child td {
+        border-top: 0;
+      }
+    }
+  }
+  table.#{$table-horizontal-name}.doc {
+    border: 0;
+    thead, tbody {
+      border: 0;
+      flex-flow: row nowrap;
+    }
+    tbody {
+      overflow: auto;
+      justify-content: space-between;
+      flex: 1 0 0;
+      margin-left: calc( 4 * var(#{$universal-margin-var}));
+      padding-bottom: calc(var(#{$universal-padding-var}) / 4);
+    }
+    tr {
+      flex-direction: column;
+      flex: 1 0 auto;
+    }
+    th, td {
+      width: 100%;
+      border: 0;
+      border-bottom: $__1px solid var(#{$table-border-color-var});
+      &:not(:first-child){
+        border-top: 0;
+      }
+    }
+    th {
+      text-align: right;
+      border-left: $__1px solid var(#{$table-border-color-var});
+      border-right: $__1px solid var(#{$table-border-separator-color-var});
+    }
+    thead {
+      tr:first-child {
+        padding-left: 0;
+      }
+    }
+    th:first-child, td:first-child {
+      border-top: $__1px solid var(#{$table-border-color-var});
+    }
+    tbody tr:last-child td {
+      border-right: $__1px solid var(#{$table-border-color-var});
+      &:first-child{
+        border-top-right-radius: 0.25rem;
+      }
+      &:last-child{
+        border-bottom-right-radius: 0.25rem;
+      }
+    }
+    thead tr:first-child th {
+      &:first-child{
+        border-top-left-radius: 0.25rem;
+      }
+      &:last-child{
+        border-bottom-left-radius: 0.25rem;
+      }
+    }
+  }
+}
+
+table.doc.cardized {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  display: table;
+  // Accessibility (element is not visible, but screen readers read it normally)
+  thead, th {
+    border: 0;
+    height: 1px;
+    width: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    clip: rect(0 0 0 0);
+    -webkit-clip-path: inset(100%);
+    clip-path: inset(100%);
+  }
+  tbody {
+    display: table-row-group;
+    border: 0;
+  }
+  tr {
+    display: block;
+    border: $__1px solid var(#{$table-border-color-var});
+    border-radius: var(#{$universal-border-radius-var});
+    @if $universal-box-shadow != none {
+      box-shadow: var(#{$universal-box-shadow-var});
+    }
+    background: #fafafa;     // use variables, this is a test (body)
+    padding: var(#{$universal-padding-var});
+    margin: var(#{$universal-margin-var});
+    margin-bottom: calc(2 * var(#{$universal-margin-var}));
+  }
+  td {
+    display: block;
+    border: 0;
+    text-align: right;
+  }
+  td:before {
+    content: attr(#{$table-mobile-card-label});
+    float: left;
+    font-weight: $table-mobile-label-font-weight;
+  }
+}

src/mini/_table.scss

@@ -240,6 +240,7 @@ table {
         clip-path: inset(100%);
       }
       tbody {
+        border: 0;
         display: table-row-group;
       }
       tr {
@@ -295,6 +296,7 @@ table {
         clip-path: inset(100%);
       }
       tbody {
+        border: 0;
         display: table-row-group;
       }
       tr {