Tables

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

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 then include the Sass mixin anywhere below.

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

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

Source

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