Tables

Consistent reset styles for default HTML data tables with modifier classes for rows.

Examples (anchor)

The tables expect the existence of basic reset styles for font styling and typography properties. The typography style module provides this but the styles should work with any reset/normalize document used.

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

The .table-wrap utility is all that's required, the other attributes demonstrate a WCAG-compliant responsive table as explained in Adrian Roselli's Under-Engineered Responsive Tables article. The style="white-space: nowrap;" is only included on the example to force the columns to full width to demonstrate the overflow style.

<div class="table-wrap" role="region" aria-labelledby="Caption1" tabindex="0">
<table style="white-space: nowrap;">
<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</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</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</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</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</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</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</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 (anchor)

Load StyleMods as demonstrated (change file path as required) then include the Sass mixin anywhere below.

custom.scss 
@use "stylemods/scss" as *;
@include tables-css;

See the using modules page for more information including how to compile the modules in cascade layers and include and reuse them in multiple source files.

Using the framework (anchor)

Enable using custom overrides or in the configuration.scss document:

overrides.scss 
@use 'stylemods/scss/configuration' with (
  $enable-tables: true,
);
configuration.scss 
$enable-tables: true !default;

Using overrides in a custom setup is recommended. See using the framework for more information including how the styles can also be compiled within cascade layers if preferred or required.

Source code (anchor)

The modules and the framework follow the same methods for customizing the default values and using the CSS variables to create custom theme documents. See the customizing page for more information.

tables.scss 
// ---------------------------------------------------------- 
// Tables
// ----------------------------------------------------------
$thead-text-color:                var(--thead-text, inherit) !default;
$thead-font-weight:               var(--thead-fw, bold) !default;
$thead-background-color:          var(--thead-bg, color-mix(in srgb, CanvasText 3%, Canvas)) !default;
$table-caption-font-weight:       var(--table-caption-fw, bold) !default;
$table-caption-padding-bottom:    0.5rem !default;
$table-border-color:              var(--table-bd-color, color-mix(in srgb, CanvasText 10%, Canvas)) !default;
$table-margin-bottom:             var(--table-mb, 1rem) !default;
$table-padding-block:             var(--table-py, 0.313rem) !default;
$table-padding-inline:            var(--table-px, 0.75rem) !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: $table-caption-font-weight;
  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: $thead-font-weight;
  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