Tables

Consistently styled standard HTML data tables with basic utility options that can be customized with localised variables globally or inline.

Examples

Table 1: Regular table
Section Floor Extension
Management 5th #555321
Accounting 4th #444321
Marketing 3rd #333321
Table 2: Background hover on rows [class="table-hover"]
Section Floor Extension
Management 5th #555321
Accounting 4th #444321
Marketing 3rd #333321
Table 3: Striped row table [class="table-striped"]
Section Floor Extension
Management 5th #555321
Accounting 4th #444321
Marketing 3rd #333321
IT helpdesk 2nd #222321
Mailroom 1st #111321
Shop front Ground #000321
Table 4: Striped row and hover combined table [class="table-combo"]
Section Floor Extension
Management 5th #555321
Accounting 4th #444321
Marketing 3rd #333321
IT helpdesk 2nd #222321
Mailroom 1st #111321
Shop front Ground #000321
Table 5: Responsive HTML table
Section Floor Address Extension Email
Management 7th floor 100 Main Street, Mutual Building #111321 management@example.com
Accounting 6th floor 100 Main Street, Mutual Building #222321 accounting@example.com
HR department 5th floor 100 Main Street, Mutual Building #333321 humanrelations@example.com
Marketing and public relations 4th floor 100 Main Street, Mutual Building #444321 marketing.and.public.relations@example.com
Web and social media 3rd floor 100 Main Street, Mutual Building #444321 web@example.com
IT helpdesk 2nd floor 100 Main Street, Mutual Building #555321 ithelpdesk@example.com
Mailroom 1st floor 100 Main Street, Mutual Building #666321 mailroom@example.com

Examples HTML 
<table>
<caption>Table 1: Regular table</caption>
<thead>
<tr>
<th scope="col">Section</th>
<th scope="col">Floor</th>
<th scope="col">Extension</th>
</tr>
</thead>
<tbody>
  <tr>
  <td>Management</td>
  <td>5th</td>
  <td>#555321</td>
  </tr>
  <tr>
  <td>Accounting</td>
  <td>4th</td>
  <td>#444321</td>
  </tr>
  <tr>
  <td>Marketing</td>
  <td>3rd</td>
  <td>#333321</td>
  </tr>
</tbody>
</table>


<table class="table-hover">
<caption>Table 2: Background hover on rows <code>[class="table-hover"]</code></caption>
<thead>
<tr>
<th scope="col">Section</th>
<th scope="col">Floor</th>
<th scope="col">Extension</th>
</tr>
</thead>
<tbody>
  <tr>
  <td>Management</td>
  <td>5th</td>
  <td>#555321</td>
  </tr>
  <tr>
  <td>Accounting</td>
  <td>4th</td>
  <td>#444321</td>
  </tr>
  <tr>
  <td>Marketing</td>
  <td>3rd</td>
  <td>#333321</td>
  </tr>
</tbody>
</table>


<table class="table-striped">
<caption>Table 3: Striped row table <code>[class="table-striped"]</code></caption>
<thead>
<tr>
<th scope="col">Section</th>
<th scope="col">Floor</th>
<th scope="col">Extension</th>
</tr>
</thead>
<tbody>
  <tr>
  <td>Management</td>
  <td>5th</td>
  <td>#555321</td>
  </tr>
  <tr>
  <td>Accounting</td>
  <td>4th</td>
  <td>#444321</td>
  </tr>
  <tr>
  <td>Marketing</td>
  <td>3rd</td>
  <td>#333321</td>
  </tr>
  <tr>
  <td>IT helpdesk</td>
  <td>2nd</td>
  <td>#222321</td>
  </tr>
  <tr>
  <td>Mailroom</td>
  <td>1st</td>
  <td>#111321</td>
  </tr>
  <tr>
  <td>Shop front</td>
  <td>Ground</td>
  <td>#000321</td>
  </tr>
</tbody>
</table>


<table class="table-combo">
<caption>Table 4: Striped row and hover combined table <code>[class="table-combo"]</code></caption>
<thead>
<tr>
<th scope="col">Section</th>
<th scope="col">Floor</th>
<th scope="col">Extension</th>
</tr>
</thead>
<tbody>
  <tr>
  <td>Management</td>
  <td>5th</td>
  <td>#555321</td>
  </tr>
  <tr>
  <td>Accounting</td>
  <td>4th</td>
  <td>#444321</td>
  </tr>
  <tr>
  <td>Marketing</td>
  <td>3rd</td>
  <td>#333321</td>
  </tr>
  <tr>
  <td>IT helpdesk</td>
  <td>2nd</td>
  <td>#222321</td>
  </tr>
  <tr>
  <td>Mailroom</td>
  <td>1st</td>
  <td>#111321</td>
  </tr>
  <tr>
  <td>Shop front</td>
  <td>Ground</td>
  <td>#000321</td>
  </tr>
</tbody>
</table>


<div class="table-wrap" role="region" aria-labelledby="Caption1" tabindex="0">
<table>
<caption id="Caption1">Table 5: Responsive HTML table</caption>
<thead>
<tr>
<th scope="col">Section</th>
<th scope="col">Floor</th>
<th scope="col">Address</th>
<th scope="col">Extension</th>
<th scope="col">Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Management</td>
<td>7th floor</td>
<td>100 Main Street, Mutual Building</td>
<td>#111321</td>
<td><a href="#">management@example.com</a></td>
</tr>
<tr>
<td>Accounting</td>
<td>6th floor</td>
<td>100 Main Street, Mutual Building</td>
<td>#222321</td>
<td><a href="#">accounting@example.com</a></td>
</tr>
<tr>
<td>HR department</td>
<td>5th floor</td>
<td>100 Main Street, Mutual Building</td>
<td>#333321</td>
<td><a href="#">humanrelations@example.com</a></td>
</tr>
<tr>
<td>Marketing and public relations</td>
<td>4th floor</td>
<td>100 Main Street, Mutual Building</td>
<td>#444321</td>
<td><a href="#">marketing.and.public.relations@example.com</a></td>
</tr>
<tr>
<td>Web and social media</td>
<td>3rd floor</td>
<td>100 Main Street, Mutual Building</td>
<td>#444321</td>
<td><a href="#">web@example.com</a></td>
</tr>
<tr>
<td>IT helpdesk</td>
<td>2nd floor</td>
<td>100 Main Street, Mutual Building</td>
<td>#555321</td>
<td><a href="#">ithelpdesk@example.com</a></td>
</tr>
<tr>
<td>Mailroom</td>
<td>1st floor</td>
<td>100 Main Street, Mutual Building</td>
<td>#666321</td>
<td><a href="#">mailroom@example.com</a></td>
</tr>
</tbody>
</table>
</div>

Using the module

Add the sassmods.scss to your custom styles as below, use the Sass variables from the module's source code (see below) to customize the default property values if required, then include the Sass mixin anywhere below.

// custom.scss
@use "sassmods/scss/sassmods" as *;
$table-padding-block: 0.25rem; // example
$table-padding-inline: 0.5rem; // example

@include tables-css;

Using the framework

Enable the module in the sassmods-system.scss document as below, if required customize the styles or the Sass variables for the default property values directly in the source code (see below).

$enable-tables: true;

Source

The source code is a self-contained Sass document that compiles the style modules as Sass mixins using Sass variables provided for the core property values that can be customized as described above.

_tables.scss

Use the property specific CSS variables to create root level variables for global styles and/or editing inline, or change all the values to suit your own parameters.

// ---------------------------------------------------------- 
// Tables
// ----------------------------------------------------------
$table-margin-bottom:             var(--table-mb, 1rem) !default;
$table-border-color:              var(--table-bd-color, color-mix(in srgb, CanvasText 10%, Canvas)) !default;
$table-padding-block:             var(--table-py, 0.313rem) !default;
$table-padding-inline:            var(--table-px, 0.75rem) !default;
$thead-text-color:                     var(--thead-txt, inherit) !default;
$thead-background-color:          var(--thead-bg, color-mix(in srgb, CanvasText 3%, Canvas)) !default;
$table-caption-padding-bottom:    0.5rem !default;
$table-stripes-color:             var(--table-stripes-text, inherit) !default;
$table-stripes-background-color:  var(--table-stripes, color-mix(in srgb, CanvasText 1%, Canvas)) !default;
$table-hover-color:               var(--table-hover-text, inherit) !default;
$table-hover-background-color:    var(--table-hover, color-mix(in srgb, CanvasText 2%, Canvas)) !default;

@mixin tables-css {

:where(table) {
  border-collapse: collapse;
  inline-size: 100%;
  margin-block-end: #{$table-margin-bottom};
  font-variant-numeric: tabular-nums;
}

:where(caption) {
  font-weight: bold;
  text-align: left;
  padding-block-end: #{$table-caption-padding-bottom};
}

:where(thead) th {
  color: #{$thead-text-color};
  background-color: #{$thead-background-color};
}

:where(thead) th:last-child {
  border-inline-end-color: #{$table-border-color};
}

:where(th) {
  font-weight: bold;
  text-align: inherit;
  text-align: -webkit-match-parent;
}

:where(thead, tbody, tfoot, tr, td, th) {
  border: 1px solid #{$table-border-color};
  vertical-align: top;
}

:where(tbody, thead) th, td {
  padding-block: #{$table-padding-block};
  padding-inline: #{$table-padding-inline};
  white-space: nowrap;
}

:where(.table-striped tr):nth-child(even),
:where(.table-combo tr):nth-child(even) {
  color: #{$table-stripes-color};
  background-color: #{$table-stripes-background-color};
}

:where(.table-hover tbody tr):hover,
:where(.table-combo tbody tr):hover {
  color: #{$table-hover-color};
  background-color: #{$table-hover-background-color};
}

:where(.table-wrap) {
  overflow-x: auto;
  margin-block-end: var(--table-wrap-mb, 1rem);
}

:where(.table-wrap):focus {
  outline: 0.188rem solid color-mix(in srgb, CanvasText 16%, Canvas);
}

:where(.table-wrap table) {
  --table-mb: 0;
}

} // end table-css