Tables

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

Examples (anchor)

The table styles can be customized prior to compiling using Sass or in real-time with CSS variables.

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.

Using the framework (anchor)

Using the recommended custom setup enable the styles in an overrides document:

overrides.scss

@use "stylemods/scss/configuration" as *;
$enable-tables: true;

Include the overrides and the framework styles with your custom document for compiling the framework:

custom.scss

@use "overrides";
@use "stylemods/scss/stylemods";

See using the framework for more information.

Source code (anchor)

The Tables source file is included with the content module files, you can view the source code from the latest release (v1.5.0) via the Github link below.

Source document: stylemods/scss/content/tables.scss
View on Github: https://github.com/pmbrown/StyleMods/blob/main/scss/content/tables.scss

Shared documentation about how to customize the default property values for the styles using the Sass and CSS variables is provided on the customizing page.