Tables

Table

You may need to specify a width attribute on one or more <th> elements to manage the relative widths of each column depending on the content.

Add a data-label attribute to each <td> with the name of the column to display a label on small screens. You can omit the attribute if you want the content of the cell to take up the entire width of the table and not have a label.

You can override the default width of the column that contains the data-label using the --heading-col-width property in the table element.

Custom Property Default Value Description
--heading-col-width 150px The width of the column containing the table headers on small screens
Table Caption
Distributor Due Date Status Invoice Amount
Strava-IL Aug 18, 2020 Overdue 20 Days #12345 $1,065.40
Strava-IL Aug 18, 2020 Overdue 10 Days #12345 $65.01
Strava-IL Aug 18, 2020 Paid #12345 $65.01
HTML 
<table class="fizz-table"
       style="--heading-col-width: 120px">
  <caption>Table Caption</caption>
  <thead>
    <tr>
      <th>Distributor</th>
      <th width="30%">Due Date</th>
      <th width="35%">Status</th>
      <th>Invoice</th>
      <th class="fizz-align-right">Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Distributor">Strava-IL</td>
      <td data-label="Due Date">Aug 18, 2020</td>
      <td data-label="Status"><span class="fizz-pill-red">Overdue</span> <span
              class="fizz-text-medium fizz-text-urgent">20 Days</span></td>
      <td data-label="Invoice">#12345</td>
      <td data-label="Amount"
          class="fizz-align-right">$1,065.40</td>
    </tr>
    <tr>
      <td data-label="Distributor">Strava-IL</td>
      <td data-label="Due Date">Aug 18, 2020</td>
      <td data-label="Status"><span class="fizz-pill-yellow">Overdue</span> <span
              class="fizz-text-medium fizz-text-urgent">10 Days</span></td>
      <td data-label="Invoice">#12345</td>
      <td data-label="Amount"
          class="fizz-align-right">$65.01</td>
    </tr>
    <tr>
      <td data-label="Distributor">Strava-IL</td>
      <td data-label="Due Date">Aug 18, 2020</td>
      <td data-label="Status"><span class="fizz-pill-green">Paid</span></td>
      <td data-label="Invoice">#12345</td>
      <td data-label="Amount"
          class="fizz-align-right">$65.01</td>
    </tr>
  </tbody>
</table>

Condensed Table

Use .fizz-table-condensed for reduced padding and a smaller font size.

Table Caption
Distributor Due Date Status Invoice Amount
Strava-IL Aug 18, 2020 Overdue 20 Days #12345 $1,065.40
Strava-IL Aug 18, 2020 Overdue 10 Days #12345 $65.01
Strava-IL Aug 18, 2020 Paid #12345 $65.01
HTML 
<table class="fizz-table fizz-table-condensed">
  <caption>Table Caption</caption>
  <thead>
    <tr>
      <th>Distributor</th>
      <th width="30%">Due Date</th>
      <th width="35%">Status</th>
      <th>Invoice</th>
      <th class="fizz-align-right">Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Distributor">Strava-IL</td>
      <td data-label="Due Date">Aug 18, 2020</td>
      <td data-label="Status"><span class="fizz-pill-red">Overdue</span> <span
              class="fizz-text-medium fizz-text-urgent">20 Days</span></td>
      <td data-label="Invoice">#12345</td>
      <td data-label="Amount"
          class="fizz-align-right">$1,065.40</td>
    </tr>
    <tr>
      <td data-label="Distributor">Strava-IL</td>
      <td data-label="Due Date">Aug 18, 2020</td>
      <td data-label="Status"><span class="fizz-pill-yellow">Overdue</span> <span
              class="fizz-text-medium fizz-text-urgent">10 Days</span></td>
      <td data-label="Invoice">#12345</td>
      <td data-label="Amount"
          class="fizz-align-right">$65.01</td>
    </tr>
    <tr>
      <td data-label="Distributor">Strava-IL</td>
      <td data-label="Due Date">Aug 18, 2020</td>
      <td data-label="Status"><span class="fizz-pill-green">Paid</span></td>
      <td data-label="Invoice">#12345</td>
      <td data-label="Amount"
          class="fizz-align-right">$65.01</td>
    </tr>
  </tbody>
</table>

Unresponsive Table

If you have a small table that you don't want to be responsive on small screens, you can add .fizz-table-unresponsive.

Distributor Invoice # Amount Due
Starla-IL 12345 $1,065.40
Breakthru Beverage 12346 $2,018.20
Eagle Rock 12347 $330.00
Savannah Beer Company 12348 $10,000.00
HTML 
<table class="fizz-table fizz-table-unresponsive fizz-table-condensed">
  <thead>
    <tr>
      <th>Distributor</th>
      <th class="fizz-nowrap fizz-text-right">Invoice #</th>
      <th class="fizz-nowrap fizz-text-right">Amount Due</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Starla-IL</td>
      <td class="fizz-text-right">12345</td>
      <td class="fizz-text-right">$1,065.40</td>
    </tr>
    <tr>
      <td>Breakthru Beverage</td>
      <td class="fizz-text-right">12346</td>
      <td class="fizz-text-right">$2,018.20</td>
    </tr>
    <tr>
      <td>Eagle Rock</td>
      <td class="fizz-text-right">12347</td>
      <td class="fizz-text-right">$330.00</td>
    </tr>
    <tr>
      <td>Savannah Beer Company</td>
      <td class="fizz-text-right">12348</td>
      <td class="fizz-text-right">$10,000.00</td>
    </tr>
  </tbody>
</table>

Highlight Rows

Use .fizz-table-highlight-rows to add a hover effect on each table row.

Table Caption
Distributor Due Date Status Invoice Amount
Strava-IL Aug 18, 2020 Overdue 20 Days #12345 $1,065.40
Strava-IL Aug 18, 2020 Overdue 10 Days #12345 $65.01
Strava-IL Aug 18, 2020 Paid #12345 $65.01
HTML 
<table class="fizz-table fizz-table-hightlight-rows">
  <caption>Table Caption</caption>
  <thead>
    <tr>
      <th>Distributor</th>
      <th width="30%">Due Date</th>
      <th width="35%">Status</th>
      <th>Invoice</th>
      <th class="fizz-align-right">Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Distributor">Strava-IL</td>
      <td data-label="Due Date">Aug 18, 2020</td>
      <td data-label="Status"><span class="fizz-pill-red">Overdue</span> <span
              class="fizz-text-medium fizz-text-urgent">20 Days</span></td>
      <td data-label="Invoice">#12345</td>
      <td data-label="Amount"
          class="fizz-align-right">$1,065.40</td>
    </tr>
    <tr>
      <td data-label="Distributor">Strava-IL</td>
      <td data-label="Due Date">Aug 18, 2020</td>
      <td data-label="Status"><span class="fizz-pill-yellow">Overdue</span> <span
              class="fizz-text-medium fizz-text-urgent">10 Days</span></td>
      <td data-label="Invoice">#12345</td>
      <td data-label="Amount"
          class="fizz-align-right">$65.01</td>
    </tr>
    <tr>
      <td data-label="Distributor">Strava-IL</td>
      <td data-label="Due Date">Aug 18, 2020</td>
      <td data-label="Status"><span class="fizz-pill-green">Paid</span></td>
      <td data-label="Invoice">#12345</td>
      <td data-label="Amount"
          class="fizz-align-right">$65.01</td>
    </tr>
  </tbody>
</table>

Select Rows

Add .fizz-row-select to a table to include a checkbox in the first column and position it appropriately on large and small screens.

Table Caption
Distributor Due Date Status Invoice Amount
Strava-IL Aug 18, 2020 Overdue 20 Days #12345 $1,065.40
Strava-IL Aug 18, 2020 Overdue 10 Days #12345 $65.01
Strava-IL Aug 18, 2020 Paid #12345 $65.01
HTML 
<table class="fizz-table fizz-row-select"
       style="--heading-col-width: 120px">
  <caption>Table Caption</caption>
  <thead>
    <tr>
      <th></th>
      <th>Distributor</th>
      <th width="30%">Due Date</th>
      <th width="35%">Status</th>
      <th>Invoice</th>
      <th class="fizz-align-right">Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox"
               class="fizz-checkbox"></td>
      <td data-label="Distributor">Strava-IL</td>
      <td data-label="Due Date">Aug 18, 2020</td>
      <td data-label="Status"><span class="fizz-pill-red">Overdue</span> <span
              class="fizz-text-medium fizz-text-urgent">20 Days</span></td>
      <td data-label="Invoice">#12345</td>
      <td data-label="Amount"
          class="fizz-align-right">$1,065.40</td>
    </tr>
    <tr>
      <td><input type="checkbox"
               class="fizz-checkbox"></td>
      <td data-label="Distributor">Strava-IL</td>
      <td data-label="Due Date">Aug 18, 2020</td>
      <td data-label="Status"><span class="fizz-pill-yellow">Overdue</span> <span
              class="fizz-text-medium fizz-text-urgent">10 Days</span></td>
      <td data-label="Invoice">#12345</td>
      <td data-label="Amount"
          class="fizz-align-right">$65.01</td>
    </tr>
    <tr>
      <td><input type="checkbox"
               class="fizz-checkbox"></td>
      <td data-label="Distributor">Strava-IL</td>
      <td data-label="Due Date">Aug 18, 2020</td>
      <td data-label="Status"><span class="fizz-pill-green">Paid</span></td>
      <td data-label="Invoice">#12345</td>
      <td data-label="Amount"
          class="fizz-align-right">$65.01</td>
    </tr>
  </tbody>
</table>

Bordered Table

Adds a border around the table and removes the bottom margin from table rows on small screens.

Table Caption
Distributor Due Date Status Invoice Amount
Strava-IL Aug 18, 2020 Overdue 20 Days #12345 $1,065.40
Strava-IL Aug 18, 2020 Overdue 10 Days #12345 $65.01
Strava-IL Aug 18, 2020 Paid #12345 $65.01
HTML 
<table class="fizz-table fizz-table-bordered">
  <caption>Table Caption</caption>
  <thead>
    <tr>
      <th>Distributor</th>
      <th width="30%">Due Date</th>
      <th width="35%">Status</th>
      <th>Invoice</th>
      <th class="fizz-align-right">Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Distributor">Strava-IL</td>
      <td data-label="Due Date">Aug 18, 2020</td>
      <td data-label="Status"><span class="fizz-pill-red">Overdue</span> <span
              class="fizz-text-medium fizz-text-urgent">20 Days</span></td>
      <td data-label="Invoice">#12345</td>
      <td data-label="Amount"
          class="fizz-align-right">$1,065.40</td>
    </tr>
    <tr>
      <td data-label="Distributor">Strava-IL</td>
      <td data-label="Due Date">Aug 18, 2020</td>
      <td data-label="Status"><span class="fizz-pill-yellow">Overdue</span> <span
              class="fizz-text-medium fizz-text-urgent">10 Days</span></td>
      <td data-label="Invoice">#12345</td>
      <td data-label="Amount"
          class="fizz-align-right">$65.01</td>
    </tr>
    <tr>
      <td data-label="Distributor">Strava-IL</td>
      <td data-label="Due Date">Aug 18, 2020</td>
      <td data-label="Status"><span class="fizz-pill-green">Paid</span></td>
      <td data-label="Invoice">#12345</td>
      <td data-label="Amount"
          class="fizz-align-right">$65.01</td>
    </tr>
  </tbody>
</table>

Table with Cell Borders

Adds borders to all sides of cells.

Table Caption
Distributor Due Date Status Invoice Amount
Strava-IL Aug 18, 2020 Overdue 20 Days #12345 $1,065.40
Strava-IL Aug 18, 2020 Overdue 10 Days #12345 $65.01
Strava-IL Aug 18, 2020 Paid #12345 $65.01
HTML 
<table class="fizz-table fizz-table-cell-borders">
  <caption>Table Caption</caption>
  <thead>
    <tr>
      <th>Distributor</th>
      <th width="30%">Due Date</th>
      <th width="35%">Status</th>
      <th>Invoice</th>
      <th class="fizz-align-right">Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Distributor">Strava-IL</td>
      <td data-label="Due Date"
          class="fizz-nowrap">Aug 18, 2020</td>
      <td data-label="Status"
          class="fizz-nowrap"><span class="fizz-pill-red">Overdue</span> <span
              class="fizz-text-medium fizz-text-urgent">20 Days</span></td>
      <td data-label="Invoice">#12345</td>
      <td data-label="Amount"
          class="fizz-align-right">$1,065.40</td>
    </tr>
    <tr>
      <td data-label="Distributor">Strava-IL</td>
      <td data-label="Due Date"
          class="fizz-nowrap">Aug 18, 2020</td>
      <td data-label="Status"
          class="fizz-nowrap"><span class="fizz-pill-yellow">Overdue</span> <span
              class="fizz-text-medium fizz-text-urgent">10 Days</span></td>
      <td data-label="Invoice">#12345</td>
      <td data-label="Amount"
          class="fizz-align-right">$65.01</td>
    </tr>
    <tr>
      <td data-label="Distributor">Strava-IL</td>
      <td data-label="Due Date"
          class="fizz-nowrap">Aug 18, 2020</td>
      <td data-label="Status"
          class="fizz-nowrap"><span class="fizz-pill-green">Paid</span></td>
      <td data-label="Invoice">#12345</td>
      <td data-label="Amount"
          class="fizz-align-right">$65.01</td>
    </tr>
  </tbody>
</table>

Table with Menu

Use .fizz-table-menu to add an icon button with optional popover menu to a table row. On small screens, this menu will be positioned absolutely in the top-right corner of the row.

You can apply .fizz-has-table-menu to the parent table row (<tr>) to apply additional padding to the first table cell on small screens so that long text does not overlap the menu button.

Table Caption
Distributor Due Date Status Invoice Amount
Strava-IL A really long string of text Aug 18, 2020 Overdue 20 Days #12345 $1,065.40
Strava-IL Aug 30, 2020 Pending #11234 $65.01
HTML 
<table class="fizz-table fizz-table-bordered fizz-table-highlight-rows">
  <caption>Table Caption</caption>
  <thead>
    <tr>
      <th>Distributor</th>
      <th width="40%">Due Date</th>
      <th width="35%">Status</th>
      <th>Invoice</th>
      <th class="fizz-align-right">Amount</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr class="fizz-has-table-menu">
      <td data-label="Distributor">Strava-IL A really long string of text</td>
      <td data-label="Due Date">Aug 18, 2020</td>
      <td data-label="Status"><span class="fizz-pill-red">Overdue</span> <span
              class="fizz-text-medium fizz-text-urgent">20 Days</span></td>
      <td data-label="Invoice">#12345</td>
      <td data-label="Amount"
          class="fizz-align-right">$1,065.40</td>
      <td>
        <div class="fizz-table-menu">
          <button class="fizz-icon-button-small">
            <svg viewBox="0 0 32 32"
                 id="icon-chevron-down"
                 class="fizz-icon-16 fizz-text-brand">
              <path d="M24.4 8.4L16 16.6 7.6 8.4 4 11.9l12 11.7 12-11.7z"></path>
            </svg>
          </button>
          <ul class="fizz-popover">
            <li><a href=""
                 class="fizz-nowrap">Option 1</a></li>
            <li><a href=""
                 class="fizz-nowrap">Option 2</a></li>
          </ul>
        </div>
      </td>
    </tr>
    <tr>
      <td data-label="Distributor">Strava-IL</td>
      <td data-label="Due Date">Aug 18, 2020</td>
      <td data-label="Status"><span class="fizz-pill-yellow">Overdue</span> <span
              class="fizz-text-medium fizz-text-urgent">10 Days</span></td>
      <td data-label="Invoice">#12345</td>
      <td data-label="Amount"
          class="fizz-align-right">$65.01</td>
      <td>
        <div class="fizz-table-menu">
          <button class="fizz-icon-button-small">
            <svg viewBox="0 0 32 32"
                 id="icon-chevron-down"
                 class="fizz-icon-16 fizz-text-brand">
              <path d="M24.4 8.4L16 16.6 7.6 8.4 4 11.9l12 11.7 12-11.7z"></path>
            </svg>
          </button>
          <ul class="fizz-popover">
            <li><a href=""
                 class="fizz-nowrap">Option 1</a></li>
            <li><a href=""
                 class="fizz-nowrap">Option 2</a></li>
          </ul>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Row Toggle

You can use the popover button above to instead toggle the visibility of the next row. You'll likely want to combine with an accordion on small screens and use .fizz-hide-on-small/.fizz-hide-on-large to switch between the two at the medium breakpoint.

Account Transaction Date Invoice Amount
International Lounge 08/25/2022 #W-1234953 $1,065.40
Original invoice amount
$1,065.40
Credit #45678 applied
-$30.00
Credit #12345 applied
-$35.40
Total Payment
$1,000.00
International Lounge 08/25/2022 #W-1234953 $1,065.40
Original invoice amount
$1,065.40
Credit #45678 applied
-$30.00
Credit #12345 applied
-$35.40
Total Payment
$1,000.00
International Lounge Succeeded

Invoice #PAY3928
$1,000.00

Account:
International Lounge
Transaction Date
08/25/2022
Status
Succeeded
Payment Method
ACH
Settlement Date
08/25/2022
Invoice
#PAYF8fv3
Net Amount
$1,000.00
Original invoice amount
$1,065.40
Credit #45678 applied
-$30.00
Credit #12345 applied
-$35.40
Total Payment
$1,000.00
International Lounge Pending

Invoice #PAY3928
$1,000.00

Account:
International Lounge
Transaction Date
08/25/2022
Status
Pending
Payment Method
ACH
Settlement Date
08/25/2022
Invoice
#PAYF8fv3
Net Amount
$1,000.00
Original invoice amount
$1,065.40
Credit #45678 applied
-$30.00
Credit #12345 applied
-$35.40
Total Payment
$1,000.00
International Lounge Succeeded

Invoice #PAY3928
$1,000.00

Account:
International Lounge
Transaction Date
08/25/2022
Status
Succeeded
Payment Method
ACH
Settlement Date
08/25/2022
Invoice
#PAYF8fv3
Net Amount
$1,000.00
Original invoice amount
$1,065.40
Credit #45678 applied
-$30.00
Credit #12345 applied
-$35.40
Total Payment
$1,000.00
International Lounge Cancelled

Invoice #PAY3928
$1,000.00

Account:
International Lounge
Transaction Date
08/25/2022
Status
Cancelled
Payment Method
ACH
Settlement Date
08/25/2022
Invoice
#PAYF8fv3
Net Amount
$1,000.00
Original invoice amount
$1,065.40
Credit #45678 applied
-$30.00
Credit #12345 applied
-$35.40
Total Payment
$1,000.00
International Lounge Succeeded

Invoice #PAY3928
$1,000.00

Account:
International Lounge
Transaction Date
08/25/2022
Status
Succeeded
Payment Method
ACH
Settlement Date
08/25/2022
Invoice
#PAYF8fv3
Net Amount
$1,000.00
Original invoice amount
$1,065.40
Credit #45678 applied
-$30.00
Credit #12345 applied
-$35.40
Total Payment
$1,000.00
HTML 
<div class="fizz-container fizz-hide-on-small">
  <table class="fizz-table fizz-table-unresponsive">
    <thead>
      <tr>
        <th>Account</th>
        <th>Transaction Date</th>
        <th>Invoice</th>
        <th class="fizz-text-right">Amount</th>
        <th width="1%"></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-label="Account">International Lounge</td>
        <td data-label="Transaction Date">08/25/2022</td>
        <td data-label="Invoice">#W-1234953</td>
        <td data-label="Amount"
            class="fizz-text-right">$1,065.40</td>
        <td>
          <div class="fizz-table-menu">
            <button class="fizz-icon-button-small"
                    onclick="toggleRow(event)">
              <svg viewBox="0 0 32 32"
                   id="icon-chevron-down"
                   class="fizz-icon-16 fizz-text-brand">
                <path d="M24.4 8.4L16 16.6 7.6 8.4 4 11.9l12 11.7 12-11.7z"></path>
              </svg>
            </button>
          </div>
        </td>
      </tr>
      <tr class="fizz-is-hidden">
        <td colspan="4"
            class="fizz-text-right">
          <dl class="fizz-flow-16"
              style="max-width: 300px; margin-left: auto;">
            <div class="fizz-space-between">
              <dt>Original invoice amount</dt>
              <dd>$1,065.40</dd>
            </div>
            <div class="fizz-space-between">
              <dt>Credit #45678 applied</dt>
              <dd>-$30.00</dd>
            </div>
            <div class="fizz-space-between">
              <dt>Credit #12345 applied</dt>
              <dd>-$35.40</dd>
            </div>
            <div class="fizz-space-between">
              <dt><strong>Total Payment</strong></dt>
              <dd><strong>$1,000.00</strong></dd>
            </div>
          </dl>
        </td>
        <td></td>
      </tr>
      <tr>
        <td data-label="Account">International Lounge</td>
        <td data-label="Transaction Date">08/25/2022</td>
        <td data-label="Invoice">#W-1234953</td>
        <td data-label="Amount"
            class="fizz-text-right">$1,065.40</td>
        <td>
          <div class="fizz-table-menu">
            <button class="fizz-icon-button-small"
                    onclick="toggleRow(event)">
              <svg viewBox="0 0 32 32"
                   id="icon-chevron-down"
                   class="fizz-icon-16 fizz-text-brand">
                <path d="M24.4 8.4L16 16.6 7.6 8.4 4 11.9l12 11.7 12-11.7z"></path>
              </svg>
            </button>
          </div>
        </td>
      </tr>
      <tr class="fizz-is-hidden">
        <td colspan="4"
            class="fizz-text-right">
          <dl class="fizz-flow-16"
              style="max-width: 300px; margin-left: auto;">
            <div class="fizz-space-between">
              <dt>Original invoice amount</dt>
              <dd>$1,065.40</dd>
            </div>
            <div class="fizz-space-between">
              <dt>Credit #45678 applied</dt>
              <dd>-$30.00</dd>
            </div>
            <div class="fizz-space-between">
              <dt>Credit #12345 applied</dt>
              <dd>-$35.40</dd>
            </div>
            <div class="fizz-space-between">
              <dt><strong>Total Payment</strong></dt>
              <dd><strong>$1,000.00</strong></dd>
            </div>
          </dl>
        </td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

<div class="fizz-hide-on-large fizz-border-bottom fizz-expand-16-on-small">
  <details class="fizz-accordion">
    <summary>
      <div class="fizz-space-between">
        <span class="fizz-heading-4">International Lounge</span>
        <span class="fizz-badge fizz-surface-green fizz-hide-on-open">Succeeded</span>
      </div>
      <p class="fizz-text-subdued fizz-text-small fizz-hide-on-open">
        Invoice #PAY3928<br>
        $1,000.00
      </p>
    </summary>
    <div class="fizz-inset-square-16">
      <dl class="fizz-definition-list-horizontal fizz-stack-16">
        <dt>Account:</dt>
        <dd>International Lounge</dd>
        <dt>Transaction Date</dt>
        <dd>08/25/2022</dd>
        <dt>Status</dt>
        <dd><span class="fizz-badge fizz-surface-green">Succeeded</span></dd>
        <dt>Payment Method</dt>
        <dd>ACH</dd>
        <dt>Settlement Date</dt>
        <dd>08/25/2022</dd>
        <dt>Invoice</dt>
        <dd>#PAYF8fv3</dd>
        <dt>Net Amount</dt>
        <dd>$1,000.00</dd>
      </dl>
      <dl class="fizz-flow-16 fizz-surface-gray fizz-inset-stretch-24">
        <div class="fizz-space-between">
          <dt>Original invoice amount</dt>
          <dd>$1,065.40</dd>
        </div>
        <div class="fizz-space-between">
          <dt>Credit #45678 applied</dt>
          <dd>-$30.00</dd>
        </div>
        <div class="fizz-space-between">
          <dt>Credit #12345 applied</dt>
          <dd>-$35.40</dd>
        </div>
        <div class="fizz-space-between">
          <dt><strong>Total Payment</strong></dt>
          <dd><strong>$1,000.00</strong></dd>
        </div>
      </dl>
    </div>
  </details>
</div>

<script>
  function toggleRow(e) {
    var button = e.target.closest('button')
    var row = e.target.closest('tr')
    row.classList.toggle('fizz-row-open')
    button.classList.toggle('fizz-flip-icon')
  }
</script>

Matrix Table

You can have multiple <tbody> elements if needed. Emoji were used in this example but you could use Fizz icons or text as well.

Permissions per role Admin Manager Employee
Orders
Add to Cart ✅ ✅ ✅
Submit Orders ✅ ✅ ❌
Manage Employees ✅ ❌ ❌
Payments
View Invoices ✅ ✅ ✅
Pay Invoices ✅ ✅ ❌
Manage Payment Methods ✅ ❌ ❌
HTML 
<table class="fizz-table-matrix">
  <thead>
    <tr>
      <th>Permissions per role</th>
      <th>Admin</th>
      <th>Manager</th>
      <th>Employee</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><strong>Orders</strong></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Add to Cart</td>
      <td>✅</td>
      <td>✅</td>
      <td>✅</td>
    </tr>
    <tr>
      <td>Submit Orders</td>
      <td>✅</td>
      <td>✅</td>
      <td>❌</td>
    </tr>
    <tr>
      <td>Manage Employees</td>
      <td>✅</td>
      <td>❌</td>
      <td>❌</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td><strong>Payments</strong></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>View Invoices</td>
      <td>✅</td>
      <td>✅</td>
      <td>✅</td>
    </tr>
    <tr>
      <td>Pay Invoices</td>
      <td>✅</td>
      <td>✅</td>
      <td>❌</td>
    </tr>
    <tr>
      <td>Manage Payment Methods</td>
      <td>✅</td>
      <td>❌</td>
      <td>❌</td>
    </tr>
  </tbody>
</table>

Compact Table

Discounts
Joseph Cartron - 50 case mix deal -$530.00
Total Savings: $530.00
Subtotal $5,702.40 $5,172.40
HTML 
<table class="fizz-text-medium fizz-table-compact"
       style="max-width: 450px;">
  <thead>
    <tr>
      <th colspan="2">Discounts</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Joseph Cartron - 50 case mix deal</td>
      <td class="fizz-align-right">-$530.00</td>
    </tr>
    <tr>
      <th>Total Savings:</th>
      <td class="fizz-align-right"><strong class="fizz-text-deal">$530.00</strong></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Subtotal</th>
      <td class="fizz-align-right"><s>$5,702.40</s> <strong>$5,172.40</strong></td>
    </tr>
  </tfoot>
</table>

Helpful Utilities

nowrap

Add .fizz-nowrap to a table cell to prevent the text within from wrapping. (See Table with Cell Borders above for example.)

table-align-top

Add .fizz-table-align-top to a table to vertically align all of its cells to the top instead of defaulting to center alignment.