Table

Basic Usage

You can style a Table by adding the table class to any table element.

First Name	Last Name	Job Area	Job Title
John	Johnson	Analytics	Data Analyst
Jack	Jackson	Analytics	Manager
Robin	Robinson	Engineering	Software Engineer

<table class="table">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Job Area</th>
      <th>Job Title</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Johnson</td>
      <td>Analytics</td>
      <td>Data Analyst</td>
    </tr>
    <tr>
      <td>Jack</td>
      <td>Jackson</td>
      <td>Analytics</td>
      <td>Manager</td>
    </tr>
    <tr>
      <td>Robin</td>
      <td>Robinson</td>
      <td>Engineering</td>
      <td>Software Engineer</td>
    </tr>
  </tbody>
</table>

Fixed Header

You can make the header of a Table stick to the top as the user scrolls by adding the fixed-header class to the table element.

This is experimental and doesn't work when the table is inside an element with overflow: hidden or overflow: auto. It also isn't currently supported in all browsers (as of February 2026).

First Name	Last Name	Job Area	Job Title
John	Johnson	Analytics	Data Analyst
Jack	Jackson	Analytics	Manager
Robin	Robinson	Engineering	Software Engineer

<table class="table fixed-header">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Job Area</th>
      <th>Job Title</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Johnson</td>
      <td>Analytics</td>
      <td>Data Analyst</td>
    </tr>
    <tr>
      <td>Jack</td>
      <td>Jackson</td>
      <td>Analytics</td>
      <td>Manager</td>
    </tr>
    <tr>
      <td>Robin</td>
      <td>Robinson</td>
      <td>Engineering</td>
      <td>Software Engineer</td>
    </tr>
  </tbody>
</table>

Caption/Footer

The caption and tfoot elements are styled automatically.

Sales Figures
Quarter	Gross Revenue
Q1	$1,202,133
Q2	$2,001,259
Q3	$997,673
Q4	$1,012,422
Total	$5,213,487

<table class="table">
  <caption>
    Sales Figures
  </caption>
  <thead>
    <tr>
      <th>Quarter</th>
      <th>Gross Revenue</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Q1</td>
      <td>$1,202,133</td>
    </tr>
    <tr>
      <td>Q2</td>
      <td>$2,001,259</td>
    </tr>
    <tr>
      <td>Q3</td>
      <td>$997,673</td>
    </tr>
    <tr>
      <td>Q4</td>
      <td>$1,012,422</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>$5,213,487</td>
    </tr>
  </tfoot>
</table>

Caption Below

You can place the caption below the table by adding the class caption-below to the table element.

Sales Figures
Quarter	Gross Revenue
Q1	$1,202,133
Q2	$2,001,259
Q3	$997,673
Q4	$1,012,422

<table class="table caption-below">
  <caption>
    Sales Figures
  </caption>
  <thead>
    <tr>
      <th>Quarter</th>
      <th>Gross Revenue</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Q1</td>
      <td>$1,202,133</td>
    </tr>
    <tr>
      <td>Q2</td>
      <td>$2,001,259</td>
    </tr>
    <tr>
      <td>Q3</td>
      <td>$997,673</td>
    </tr>
    <tr>
      <td>Q4</td>
      <td>$1,012,422</td>
    </tr>
  </tbody>
</table>

Subtle

You can make the styling softer by adding the class subtle to the table element.

Quarter	Gross Revenue
Q1	$1,202,133
Q2	$2,001,259
Q3	$997,673
Q4	$1,012,422

<table class="table subtle">
  <thead>
    <tr>
      <th>Quarter</th>
      <th>Gross Revenue</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Q1</td>
      <td>$1,202,133</td>
    </tr>
    <tr>
      <td>Q2</td>
      <td>$2,001,259</td>
    </tr>
    <tr>
      <td>Q3</td>
      <td>$997,673</td>
    </tr>
    <tr>
      <td>Q4</td>
      <td>$1,012,422</td>
    </tr>
  </tbody>
</table>

Density

You can make a Table more compact by adding the class dense or more spread out with the class sparse.

Dense
Quarter	Gross Revenue
Q1	$1,202,133
Q2	$2,001,259
Q3	$997,673
Q4	$1,012,422

Sparse
Quarter	Gross Revenue
Q1	$1,202,133
Q2	$2,001,259
Q3	$997,673
Q4	$1,012,422

<table class="table dense">
  <caption>
    Dense
  </caption>
  <thead>
    <tr>
      <th>Quarter</th>
      <th>Gross Revenue</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Q1</td>
      <td>$1,202,133</td>
    </tr>
    <tr>
      <td>Q2</td>
      <td>$2,001,259</td>
    </tr>
    <tr>
      <td>Q3</td>
      <td>$997,673</td>
    </tr>
    <tr>
      <td>Q4</td>
      <td>$1,012,422</td>
    </tr>
  </tbody>
</table>
<table class="table sparse">
  <caption>
    Sparse
  </caption>
  <thead>
    <tr>
      <th>Quarter</th>
      <th>Gross Revenue</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Q1</td>
      <td>$1,202,133</td>
    </tr>
    <tr>
      <td>Q2</td>
      <td>$2,001,259</td>
    </tr>
    <tr>
      <td>Q3</td>
      <td>$997,673</td>
    </tr>
    <tr>
      <td>Q4</td>
      <td>$1,012,422</td>
    </tr>
  </tbody>
</table>