Tables – Design Portal

Tables are a design pattern for displaying large amounts of data in rows and columns, making them efficient for doing comparative analysis on categorical objects.

Demo

Table Heading 1	Table Heading 2	Table Heading 3
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell

<table class="table">
  <thead>
    <tr>
      <th>Table Heading 1</th>
      <th>Table Heading 2</th>
      <th>Table Heading 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table Cell</td>
      <td>Table Cell</td>
      <td>Table Cell</td>
    </tr>
    <tr>
      <td>Table Cell</td>
      <td>Table Cell</td>
      <td>Table Cell</td>
    </tr>
  </tbody>
</table>

.table {
	border-collapse: collapse;
	border: .0625rem solid var(--light-gray-1);
	inline-size: 100%;
	margin: 0;

	tr {
		&:nth-child(even) {
			background-color: #F6F6F6;
		}
	}

	th, td {
		font-size: 0.85rem;
		padding: 0.5rem;
		text-align: start;
		border-inline-end: .0625rem solid var(--light-gray-1);
	}

	th {
		font-weight: 600;
		background-color: transparent;
		border-block-end: .0625rem solid var(--light-gray-1);
	}
}

@media (min-width: $lg) {
	.table {
		th, td {
			font-size: 1rem;
			padding: 0.65rem;
		}
	}
}

No JS! 😀

States & Variations

Responsive

In order to make a table responsive, you will need to add a container around the table, with the CSS class .table-responsive. On mobile devices, or when there are many columns, the table will overflow and allow scrolling.

Table Heading 1	Table Heading 2	Table Heading 3	Table Heading 4	Table Heading 5	Table Heading 6
Table Cell	Table Cell	Table Cell	Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell	Table Cell	Table Cell	Table Cell

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Horizontal Table

In order to make a table appear horizontal, add a CSS class of .table--horizontal to the table element, and modify the markup like the below example.

Mileage	30,000 miles
Exterior	Storm Blue Metallic
Interior	Black

<table class="table table--horizontal">
  <tbody>
    <tr>
      <th>Mileage</th>
      <td>30,000 miles</td>
    </tr>
    <tr>
      <th>Exterior</th>
      <td>Storm Blue Metallic</td>
    </tr>
    <tr>
      <th>Interior</th>
      <td>Black</td>
    </tr>
  </tbody>
</table>

Stacked Table

In order to make a table appear stacked, add a CSS class of .table--stacked to the table element, and modify the markup like the below example.

Mileage	30,000 miles
Exterior	Storm Blue Metallic
Interior	Black

<table class="table table--stacked">
  <tbody>
    <tr>
      <th>Mileage</th>
      <td>30,000 miles</td>
    </tr>
    <tr>
      <th>Exterior</th>
      <td>Storm Blue Metallic</td>
    </tr>
    <tr>
      <th>Interior</th>
      <td>Black</td>
    </tr>
  </tbody>
</table>

Anatomy

Table
Table Header
Table Cell
Table Row / Row Odd