Tables

Consistent reset styles for standard HTML tables with modifier classes for striped and/or hover rows.

Examples (anchor)

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)

To use the module load the StyleMods scss directory as follows (changing the path to suit the source files location as required) then include the Sass mixin anywhere below.

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

See customizing for information about using the Sass and CSS variables in the source code below to customize the styles, and Sass variables (on the using StyleMods page) for other ways to use the variables to create custom styles.

Source code (anchor)

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