Current version: 1.9.8Components

Table

Variables

Variable property value desc.
$table-pdv padding $pd--s table vertical padding
$table-pdh padding $pd--m table horizontal padding
$selected-table-row-bg background-color $alabaster selected table-row background-color
$disabled-table-row-bg background-color $alabaster disabled table-row background-color
$table-cell-color color $slate-gray table-cell color
$important-table-cell-color color $shuttle-gray important table-cell color
$disabled-table-cell-color color $silver-sand disabled table-cell color
Name Foo Bar
A name Baz FooBar
Another name FooBaz
Name Foo Bar
A name Baz FooBar
Another name FooBaz FooBarBaz
<table class="Table">
  <thead class="Table-head">
    <tr class="Table-row">
      <th class="Table-cell Table-cell--header u-tal">Name</th>
      <th class="Table-cell Table-cell--header">Foo</th>
      <th class="Table-cell Table-cell--header">Bar</th>
    </tr>
  </thead>
  <tbody class="Table-body">
    <tr class="Table-row">
      <td class="Table-cell Table-cell--important u-tal">A name</td>
      <td class="Table-cell">Baz</td>
      <td class="Table-cell">FooBar</td>
    </tr>
    <tr class="Table-row">
      <td class="Table-cell Table-cell--important u-tal">Another name</td>
      <td class="Table-cell">FooBaz</td>
      <td class="Table-cell has-table">
        <table class="Table">
          <thead class="Table-head">
            <tr class="Table-row">
              <th class="Table-cell Table-cell--header u-tal">Name</th>
              <th class="Table-cell Table-cell--header">Foo</th>
              <th class="Table-cell Table-cell--header">Bar</th>
            </tr>
          </thead>
          <tbody class="Table-body">
            <tr class="Table-row">
              <td class="Table-cell Table-cell--important u-tal">A name</td>
              <td class="Table-cell">Baz</td>
              <td class="Table-cell">FooBar</td>
            </tr>
            <tr class="Table-row">
              <td class="Table-cell Table-cell--important u-tal">Another name</td>
              <td class="Table-cell">FooBaz</td>
              <td class="Table-cell">FooBarBaz</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Actionable

Name Foo Bar
Baz FooBar
FooBaz FooBarBaz
Foo Bar
<table class="Table Table--actionable">
  <thead class="Table-head">
    <tr class="Table-row">
      <th class="Table-cell Table-cell--header u-tal">Name</th>
      <th class="Table-cell Table-cell--header">Foo</th>
      <th class="Table-cell Table-cell--header">Bar</th>
    </tr>
  </thead>
  <tbody class="Table-body">
    <tr class="Table-row">
      <td class="Table-cell Table-cell--important u-tal">
        <input name="table1" id="table1" type="checkbox" class="Checkbox-input">
        <label for="table1" class="Checkbox-label">A name</label>
      </td>
      <td class="Table-cell">Baz</td>
      <td class="Table-cell">FooBar</td>
    </tr>
    <tr class="Table-row" aria-selected="true">
      <td class="Table-cell Table-cell--important u-tal">
        <input name="table2" id="table2" type="checkbox" class="Checkbox-input" checked>
        <label for="table2" class="Checkbox-label">Another name</label>
      </td>
      <td class="Table-cell">FooBaz</td>
      <td class="Table-cell">FooBarBaz</td>
    </tr>
    <tr class="Table-row" aria-disabled="true">
      <td class="Table-cell Table-cell--important u-tal">
        <input name="table3" id="table3" type="checkbox" class="Checkbox-input" disabled>
        <label for="table3" class="Checkbox-label">Another other name</label>
      </td>
      <td class="Table-cell">Foo</td>
      <td class="Table-cell">Bar</td>
    </tr>
  </tbody>
</table>

Responsive

Name Foo Bar
A name Baz FooBar
Another name FooBaz FooBarBaz
Name Foo Bar
Baz FooBar
FooBaz FooBarBaz
Foo Bar
<table class="Table Table@tablet Table@phablet">
  <thead class="Table-head">
    <tr class="Table-row">
      <th class="Table-cell Table-cell--header u-tal">Name</th>
      <th class="Table-cell Table-cell--header">Foo</th>
      <th class="Table-cell Table-cell--header">Bar</th>
    </tr>
  </thead>
  <tbody class="Table-body">
    <tr class="Table-row">
      <td data-th="Name" class="Table-cell Table-cell--important u-tal">A name</td>
      <td data-th="Foo" class="Table-cell">Baz</td>
      <td data-th="Bar" class="Table-cell">FooBar</td>
    </tr>
    <tr class="Table-row">
      <td data-th="Name" class="Table-cell Table-cell--important u-tal">Another name</td>
      <td data-th="Foo" class="Table-cell">FooBaz</td>
      <td data-th="Bar" class="Table-cell">FooBarBaz</td>
    </tr>
  </tbody>
</table>


<table class="Table Table--actionable Table@tablet Table@phablet">
  <thead class="Table-head">
    <tr class="Table-row">
      <th class="Table-cell Table-cell--header u-tal">Name</th>
      <th class="Table-cell Table-cell--header">Foo</th>
      <th class="Table-cell Table-cell--header">Bar</th>
    </tr>
  </thead>
  <tbody class="Table-body">
    <tr class="Table-row">
      <td data-th="Name" class="Table-cell Table-cell--important u-tal">
        <input name="table1" id="table1" type="checkbox" class="Checkbox-input">
        <label for="table1" class="Checkbox-label">A name</label>
      </td>
      <td data-th="Foo" class="Table-cell">Baz</td>
      <td data-th="Bar" class="Table-cell">FooBar</td>
    </tr>
    <tr class="Table-row" aria-selected="true">
      <td data-th="Name" class="Table-cell Table-cell--important u-tal">
        <input name="table2" id="table2" type="checkbox" class="Checkbox-input" checked>
        <label for="table2" class="Checkbox-label">Another name</label>
      </td>
      <td data-th="Foo" class="Table-cell">FooBaz</td>
      <td data-th="Bar" class="Table-cell">FooBarBaz</td>
    </tr>
    <tr class="Table-row" aria-disabled="true">
      <td data-th="Name" class="Table-cell Table-cell--important u-tal">
        <input name="table3" id="table3" type="checkbox" class="Checkbox-input" disabled>
        <label for="table3" class="Checkbox-label">Another other name</label>
      </td>
      <td data-th="Foo" class="Table-cell">Foo</td>
      <td data-th="Bar" class="Table-cell">Bar</td>
    </tr>
  </tbody>
</table>