Table

View in Github

Tabular display classes. Tables should be constructed with a <thead> and <tbody>.

Tip: Use transform: scaleY(-1); to flip ascending/descending icons

.c-table

<table class="c-table  l-width-full">
  <thead>
    <tr>
      <th class="t-align-left"><strong>A</strong></th>
      <th class="t-align-left">
        <button title="Sort by B in descending order">
          <strong>B</strong>
          <span class="c-icon c-icon--baseline t-size-xs">
            <svg aria-hidden="true"><use xlink:href="#caret-down"></use></svg>
          </span>
        </button>
      </th>
      <th class="t-align-left"><strong>C</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
  </tbody>
</table>

Repo	Count	Location(s)
donations	2	List _payments.scss PaymentList.vue
texastribune	1	List wall.html
state-salaries-draft	8	List _snapshot_ethnicity_breakdown.html _snapshot_gender_breakdown.html _snapshot_employment_status_breakdown.html _snapshot_tenure_breakdown.html _table.scss main.scss _employee_table_over_time.html PaginationTable.js
feature-voter-guide-general-2020-08	1	List DistrictViewer.js

.c-table--striped

Zebra stripes odd rows

<table class="c-table c-table--striped l-width-full">
  <thead>
    <tr>
      <th class="t-align-left"><strong>A</strong></th>
      <th class="t-align-left">
        <button title="Sort by B in descending order">
          <strong>B</strong>
          <span class="c-icon c-icon--baseline t-size-xs">
            <svg aria-hidden="true"><use xlink:href="#caret-down"></use></svg>
          </span>
        </button>
      </th>
      <th class="t-align-left"><strong>C</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
  </tbody>
</table>

Repo	Count	Location(s)
texastribune	1	List wall.html
state-salaries-draft	6	List _snapshot_ethnicity_breakdown.html _snapshot_gender_breakdown.html _snapshot_employment_status_breakdown.html _snapshot_tenure_breakdown.html _employee_table_over_time.html PaginationTable.js

.c-table--bordered

Bordered table, cells, rows and headings

<table class="c-table c-table--bordered l-width-full">
  <thead>
    <tr>
      <th class="t-align-left"><strong>A</strong></th>
      <th class="t-align-left">
        <button title="Sort by B in descending order">
          <strong>B</strong>
          <span class="c-icon c-icon--baseline t-size-xs">
            <svg aria-hidden="true"><use xlink:href="#caret-down"></use></svg>
          </span>
        </button>
      </th>
      <th class="t-align-left"><strong>C</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
  </tbody>
</table>

Repo	Count	Location(s)
donations	1	List PaymentList.vue
feature-voter-guide-general-2020-08	1	List DistrictViewer.js

.c-table--bordered-rows

Bordered rows

<table class="c-table c-table--bordered-rows l-width-full">
  <thead>
    <tr>
      <th class="t-align-left"><strong>A</strong></th>
      <th class="t-align-left">
        <button title="Sort by B in descending order">
          <strong>B</strong>
          <span class="c-icon c-icon--baseline t-size-xs">
            <svg aria-hidden="true"><use xlink:href="#caret-down"></use></svg>
          </span>
        </button>
      </th>
      <th class="t-align-left"><strong>C</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
  </tbody>
</table>

This class isn't referenced anywhere

.c-table--10-45-45

Three-column table with col widths 10%, 45%, 45%

<table class="c-table c-table--10-45-45 l-width-full">
  <thead>
    <tr>
      <th class="t-align-left"><strong>A</strong></th>
      <th class="t-align-left">
        <button title="Sort by B in descending order">
          <strong>B</strong>
          <span class="c-icon c-icon--baseline t-size-xs">
            <svg aria-hidden="true"><use xlink:href="#caret-down"></use></svg>
          </span>
        </button>
      </th>
      <th class="t-align-left"><strong>C</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
  </tbody>
</table>

This class isn't referenced anywhere

.c-table--15-70-15

Two-column table with col widths 15%, 70%, 15%

<table class="c-table c-table--15-70-15 l-width-full">
  <thead>
    <tr>
      <th class="t-align-left"><strong>A</strong></th>
      <th class="t-align-left">
        <button title="Sort by B in descending order">
          <strong>B</strong>
          <span class="c-icon c-icon--baseline t-size-xs">
            <svg aria-hidden="true"><use xlink:href="#caret-down"></use></svg>
          </span>
        </button>
      </th>
      <th class="t-align-left"><strong>C</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
  </tbody>
</table>

This class isn't referenced anywhere

.c-table--fixed

Adds table-layout: fixed. Helpful for mobile-friendly tables.

<table class="c-table c-table--fixed l-width-full">
  <thead>
    <tr>
      <th class="t-align-left"><strong>A</strong></th>
      <th class="t-align-left">
        <button title="Sort by B in descending order">
          <strong>B</strong>
          <span class="c-icon c-icon--baseline t-size-xs">
            <svg aria-hidden="true"><use xlink:href="#caret-down"></use></svg>
          </span>
        </button>
      </th>
      <th class="t-align-left"><strong>C</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
  </tbody>
</table>

This class isn't referenced anywhere