Tables

Tables

Component Preview
<table class="table">
    <caption>Tables can have captions now.</caption>
    <thead>
        <tr>
            <th>Person</th>
            <th>Number</th>
            <th>Third Column</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Someone Lastname</th>
            <td>900</td>
            <td>Nullam quis risus eget urna mollis ornare vel eu leo.</td>
        </tr>
        <tr>
            <th>
                <a href="#">Person Name</a>
            </th>
            <td>1200</td>
            <td>Vestibulum id ligula porta felis euismod semper. Donec ullamcorper
                nulla non metus auctor fringilla.</td>
        </tr>
        <tr>
            <th>Another Person</th>
            <td>1500</td>
            <td>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
                auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.</td>
        </tr>
        <tr>
            <th>Last One</th>
            <td>2800</td>
            <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras
                mattis consectetur purus sit amet fermentum.</td>
        </tr>
    </tbody>
</table>

<br /><br />

<table class="table table--gray-borders table--width-default">
    <caption>Tables can have captions now.</caption>
    <thead>
        <tr>
            <th>Person</th>
            <th>Number</th>
            <th>Third Column</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Someone Lastname</th>
            <td>900</td>
            <td>Nullam quis risus eget urna mollis ornare vel eu leo.</td>
        </tr>
        <tr>
            <th>
                <a href="#">Person Name</a>
            </th>
            <td>1200</td>
            <td>Vestibulum id ligula porta felis euismod semper. Donec ullamcorper
                nulla non metus auctor fringilla.</td>
        </tr>
        <tr>
            <th>Another Person</th>
            <td>1500</td>
            <td>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
                auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.</td>
        </tr>
        <tr>
            <th>Last One</th>
            <td>2800</td>
            <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras
                mattis consectetur purus sit amet fermentum.</td>
        </tr>
    </tbody>
</table>

<br /><br />

<table class="table table--gray-borders table--static">
    <caption class="element-invisible">Tables can have captions now.</caption>
    <thead>
        <tr>
            <th>Person</th>
            <th>Number</th>
            <th>Third Column</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Someone Lastname</th>
            <td>900</td>
            <td>Nullam quis risus eget urna mollis ornare vel eu leo.</td>
        </tr>
        <tr>
            <th>
                <a href="#">Person Name</a>
            </th>
            <td>1200</td>
            <td>Vestibulum id ligula porta felis euismod semper. Donec ullamcorper
                nulla non metus auctor fringilla.</td>
        </tr>
        <tr>
            <th>Another Person</th>
            <td>1500</td>
            <td>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
                auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.</td>
        </tr>
        <tr>
            <th>Last One</th>
            <td>2800</td>
            <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras
                mattis consectetur purus sit amet fermentum.</td>
        </tr>
    </tbody>
</table>

<br /><br />

<table class="table table--is-striped table--static table--width-default" summary="Undergraduate Cost of Attendence - Living on Campus Example Table">
    <caption><strong>Living On Campus - Example Table</strong></caption>
    <thead>
        <tr>
            <th scope="row">&nbsp;</th>
            <th scope="col">Resident</th>
            <th scope="col">Nonresident</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th colspan="3" scope="row">Estimated Charges</th>
        </tr>
        <tr>
            <th scope="row">Tuition &amp; Fees</th>
            <td>$0,000</td>
            <td>$00,000</td>
        </tr>
        <tr>
            <th scope="row">Housing &amp; Meals</th>
            <td>$00,000</td>
            <td>$00,000</td>
        </tr>
        <tr>
            <th scope="row">Subtotal</th>
            <td><strong>$00,000</strong></td>
            <td><strong>$00,000</strong></td>
        </tr>
        <tr>
            <th colspan="3" scope="row">Other Estimated Expenses</th>
        </tr>
        <tr>
            <th scope="row">Books &amp; Supplies</th>
            <td>$000</td>
            <td>$000</td>
        </tr>
        <tr>
            <th scope="row">Personal</th>
            <td>$0,000</td>
            <td>$0,000</td>
        </tr>
        <tr>
            <th scope="row">Transportation</th>
            <td>$000</td>
            <td>$000</td>
        </tr>
        <tr>
            <th scope="row"><strong>Total</strong></th>
            <td><strong>$00,000</strong></td>
            <td><strong>$00,000</strong></td>
        </tr>
    </tbody>
</table>

<br /><br />

<table class="table table--is-striped table--static table--gray-borders" summary="Undergraduate Cost of Attendence - Living on Campus Example Table">
    <thead>
        <tr>
            <th scope="row">&nbsp;</th>
            <th scope="col">Resident</th>
            <th scope="col">Nonresident</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th colspan="3" scope="row">Estimated Charges</th>
        </tr>
        <tr>
            <th scope="row">Tuition &amp; Fees</th>
            <td>$0,000</td>
            <td>$00,000</td>
        </tr>
        <tr>
            <th scope="row">Housing &amp; Meals</th>
            <td>$00,000</td>
            <td>$00,000</td>
        </tr>
        <tr>
            <th scope="row">Subtotal</th>
            <td><strong>$00,000</strong></td>
            <td><strong>$00,000</strong></td>
        </tr>
        <tr>
            <th colspan="3" scope="row">Other Estimated Expenses</th>
        </tr>
        <tr>
            <th scope="row">Books &amp; Supplies</th>
            <td>$000</td>
            <td>$000</td>
        </tr>
        <tr>
            <th scope="row">Personal</th>
            <td>$0,000</td>
            <td>$0,000</td>
        </tr>
        <tr>
            <th scope="row">Transportation</th>
            <td>$000</td>
            <td>$000</td>
        </tr>
        <tr>
            <th scope="row"><strong>Total</strong></th>
            <td><strong>$00,000</strong></td>
            <td><strong>$00,000</strong></td>
        </tr>
    </tbody>
</table>

<br /><br />

<table class="table is-striped">
    <caption class="element-invisible">Tables can have captions now.</caption>
    <thead>
        <tr>
            <th>Person</th>
            <th>Number</th>
            <th>Third Column</th>
            <th>Fourth Column</th>
            <th>Fifth Column</th>
            <th>Sixth Column</th>
            <th>Seventhth Column</th>
            <th>Eighth Column</th>
            <th>Ninth Column</th>
            <th>Tenth Column</th>
            <th>Eleventh Column</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Someone Lastname</th>
            <td>900</td>
            <td>9999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
        </tr>
        <tr>
            <th>
                <a href="#">Person Name</a>
            </th>
            <td>1200</td>
            <td>9999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
        </tr>
        <tr>
            <th>Another Person</th>
            <td>1500</td>
            <td>9999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
        </tr>
        <tr>
            <th>some other person</th>
            <td>2800</td>
            <td>9999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
        </tr>
        <tr>
            <th>Someone and a Lastname</th>
            <td>500</td>
            <td>9999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
        </tr>
        <tr>
            <th>
                <a href="#">Linked Name</a>
            </th>
            <td>1720</td>
            <td>9999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
        </tr>
        <tr>
            <th>Another random person</th>
            <td>1200</td>
            <td>9999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
        </tr>
        <tr>
            <th>Some other Person</th>
            <td>2200</td>
            <td>9999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
        </tr>
        <tr>
            <th>Firstname and something</th>
            <td>920</td>
            <td>9999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
        </tr>
        <tr>
            <th>
                <a href="#">Linked Other Name</a>
            </th>
            <td>1208</td>
            <td>9999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
        </tr>
        <tr>
            <th>Another Person Randomly selected</th>
            <td>1550</td>
            <td>9999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
        </tr>
        <tr>
            <th>Last One</th>
            <td>2830</td>
            <td>9999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
        </tr>
    </tbody>
</table>

<br /><br />

<table class="table table--is-striped table--width-default table--gray-borders">
    <caption class="element-invisible">This table was given a default width</caption>
    <thead>
        <tr>
            <th>Person</th>
            <th>Number</th>
            <th>Third Column</th>
            <th>Fourth Column</th>
            <th>Fifth Column</th>
            <th>Sixth Column</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Someone Lastname</th>
            <td>900</td>
            <td>9999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
        </tr>
        <tr>
            <th>
                <a href="#">Person Name</a>
            </th>
            <td>1200</td>
            <td>9999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
        </tr>
        <tr>
            <th>Another Person</th>
            <td>1500</td>
            <td>9999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
        </tr>
        <tr>
            <th>some other person</th>
            <td>2800</td>
            <td>9999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
        </tr>
        <tr>
            <th>Someone and a Lastname</th>
            <td>500</td>
            <td>9999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
        </tr>
        <tr>
            <th>
                <a href="#">Linked Name</a>
            </th>
            <td>1720</td>
            <td>9999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
        </tr>
        <tr>
            <th>Another random person</th>
            <td>1200</td>
            <td>9999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
        </tr>
        <tr>
            <th>Some other Person</th>
            <td>2200</td>
            <td>9999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
        </tr>
        <tr>
            <th>Firstname and something</th>
            <td>920</td>
            <td>9999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
        </tr>
        <tr>
            <th>
                <a href="#">Linked Other Name</a>
            </th>
            <td>1208</td>
            <td>9999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
        </tr>
        <tr>
            <th>Another Person Randomly selected</th>
            <td>1550</td>
            <td>9999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
        </tr>
        <tr>
            <th>Last One</th>
            <td>2830</td>
            <td>9999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
        </tr>
    </tbody>
</table>

<br /><br />

<table class="table table--is-striped table--hover-highlight table--gray-borders">
    <thead>
        <tr>
            <th>Person</th>
            <th>Number</th>
            <th>Third Column</th>
            <th>Fourth Column</th>
            <th>Fifth Column</th>
            <th>Sixth Column</th>
            <th>Seventhth Column</th>
            <th>Eighth Column</th>
            <th>Ninth Column</th>
            <th>Tenth Column</th>
            <th>Eleventh Column</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Someone Lastname</th>
            <td>900</td>
            <td>9999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
        </tr>
        <tr>
            <th>
                <a href="#">Person Name</a>
            </th>
            <td>1200</td>
            <td>9999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
        </tr>
        <tr>
            <th>Another Person</th>
            <td>1500</td>
            <td>9999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
        </tr>
        <tr>
            <th>some other person</th>
            <td>2800</td>
            <td>9999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
        </tr>
        <tr>
            <th>Someone and a Lastname</th>
            <td>500</td>
            <td>9999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
        </tr>
        <tr>
            <th>
                <a href="#">Linked Name</a>
            </th>
            <td>1720</td>
            <td>9999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
        </tr>
        <tr>
            <th>Another random person</th>
            <td>1200</td>
            <td>9999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
        </tr>
        <tr>
            <th>Some other Person</th>
            <td>2200</td>
            <td>9999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
        </tr>
        <tr>
            <th>Firstname and something</th>
            <td>920</td>
            <td>9999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
        </tr>
        <tr>
            <th>
                <a href="#">Linked Other Name</a>
            </th>
            <td>1208</td>
            <td>9999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
        </tr>
        <tr>
            <th>Another Person Randomly selected</th>
            <td>1550</td>
            <td>9999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
        </tr>
        <tr>
            <th>Last One</th>
            <td>2830</td>
            <td>9999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
            <td>1999</td>
        </tr>
    </tbody>
</table>
  • Content:
    table[border] {
      border-style: solid;
      border-color: #eee; }
      table[border] td,
      table[border] th {
        border-color: #eee; }
    
    table {
      width: 100%;
      font-size: 1.2rem;
      border-spacing: 0;
      border-collapse: collapse;
      color: #151515;
      background-color: #fff; }
      table td,
      table th {
        padding: 1.05rem;
        vertical-align: bottom;
        font-size: 1rem; }
      table th {
        color: #151515; }
        table th:not([align]) {
          text-align: left; }
      table thead th {
        background-color: #fff;
        border-bottom: 1px solid #cccccc; }
      table tbody th {
        background-color: #fff;
        border-right: 1px solid #cccccc;
        position: static;
        left: 0;
        padding-left: 1.05rem; }
      table.table--hover-highlight tbody tr:not(.is-selected):hover,
      table.table--hover-highlight tbody tr:not(.is-selected):nth-child(even):hover {
        background-color: #fff3c3; }
        table.table--hover-highlight tbody tr:not(.is-selected):hover th,
        table.table--hover-highlight tbody tr:not(.is-selected):nth-child(even):hover th {
          background-color: #fff3c3; }
      table:not(.table__responsive) caption {
        width: 100%;
        padding: 1.05rem;
        text-align: center;
        font-size: 1rem;
        color: #fff;
        text-transform: uppercase;
        background-color: #333;
        font-weight: bold; }
      table tbody tr:last-child td,
      table tbody tr:last-child th {
        border-bottom-width: 0; }
      table thead td,
      table thead th {
        color: #151515; }
      table.is-striped, table.table--is-striped {
        border: 1px solid #eee; }
        table.is-striped thead th, table.table--is-striped thead th {
          background: #FFCD00;
          text-transform: uppercase;
          border: none; }
        table.is-striped tbody th, table.table--is-striped tbody th {
          border: none; }
        table.is-striped tbody tr:not(.is-selected):nth-child(even),
        table.is-striped tbody tr:not(.is-selected):nth-child(even) th, table.table--is-striped tbody tr:not(.is-selected):nth-child(even),
        table.table--is-striped tbody tr:not(.is-selected):nth-child(even) th {
          background-color: #f3f3f3; }
      table.table--width-default {
        width: unset; }
    
    table.table--gray-borders {
      border: #ddd 1px solid; }
      table.table--gray-borders > tr > td,
      table.table--gray-borders > tr > th,
      table.table--gray-borders > tbody > tr > td,
      table.table--gray-borders > tbody > tr > th,
      table.table--gray-borders > tfoot > tr > td,
      table.table--gray-borders > tfoot > tr > th,
      table.table--gray-borders > thead > tr > td,
      table.table--gray-borders > thead > tr > th,
      table.table--gray-borders > caption > td,
      table.table--gray-borders > caption > th {
        border: #ddd 1px solid; }
      table.table--gray-borders > tbody > tr:first-child th, table.table--gray-borders > tbody > tr:first-child td {
        border-top: none; }
      table.table--gray-borders.is-striped > thead > tr > td,
      table.table--gray-borders.is-striped > thead > tr > th,
      table.table--gray-borders.is-striped > caption > td,
      table.table--gray-borders.is-striped > caption > th, table.table--gray-borders.table--is-striped > thead > tr > td,
      table.table--gray-borders.table--is-striped > thead > tr > th,
      table.table--gray-borders.table--is-striped > caption > td,
      table.table--gray-borders.table--is-striped > caption > th {
        border: #7c7c7c 1px solid; }
      table.table--gray-borders.is-striped > thead > tr > td,
      table.table--gray-borders.is-striped > thead > tr > th, table.table--gray-borders.table--is-striped > thead > tr > td,
      table.table--gray-borders.table--is-striped > thead > tr > th {
        border-bottom: #ddd 1px solid;
        border-top: #ddd 1px solid; }
        table.table--gray-borders.is-striped > thead > tr > td:first-child,
        table.table--gray-borders.is-striped > thead > tr > th:first-child, table.table--gray-borders.table--is-striped > thead > tr > td:first-child,
        table.table--gray-borders.table--is-striped > thead > tr > th:first-child {
          border-left: #ddd 1px solid; }
        table.table--gray-borders.is-striped > thead > tr > td:last-child,
        table.table--gray-borders.is-striped > thead > tr > th:last-child, table.table--gray-borders.table--is-striped > thead > tr > td:last-child,
        table.table--gray-borders.table--is-striped > thead > tr > th:last-child {
          border-right: #ddd 1px solid; }
    
    .table__responsive-container {
      width: 100%;
      position: relative; }
      .table__responsive-container--width-default {
        width: unset;
        display: inline-block; }
        .table__responsive-container--width-default table.table--width-default {
          width: unset; }
      .table__responsive-container.table__row-headers--true .table__sticky-heading:first-child {
        left: 0; }
      .table__responsive-container.table__row-headers--true.table--left-sticky-minwidth .table__sticky-heading:first-child {
        position: -webkit-sticky;
        position: sticky; }
      .table__responsive-container.table__responsive-container--is-striped {
        border: 1px solid #eee; }
        .table__responsive-container.table__responsive-container--is-striped.table__responsive-container--gray-borders {
          border: unset; }
        .table__responsive-container.table__responsive-container--is-striped.table--is-sticky-left.table--left-sticky-minwidth table.is-striped tbody th,
        .table__responsive-container.table__responsive-container--is-striped.table--is-sticky-left.table--left-sticky-minwidth table.table--is-striped tbody th {
          -webkit-filter: drop-shadow(0px 4px 2px rgba(0, 0, 0, 0.2));
                  filter: drop-shadow(0px 4px 2px rgba(0, 0, 0, 0.2)); }
        .table__responsive-container.table__responsive-container--is-striped.table--is-sticky-left.table--left-sticky-minwidth .table__sticky-heading:first-child {
          -webkit-filter: drop-shadow(0px 4px 2px rgba(0, 0, 0, 0.2));
                  filter: drop-shadow(0px 4px 2px rgba(0, 0, 0, 0.2)); }
        .table__responsive-container.table__responsive-container--is-striped.table--is-sticky-top .table__responsive-header {
          transition: -webkit-filter 0.3s ease-in-out;
          transition: filter 0.3s ease-in-out;
          transition: filter 0.3s ease-in-out, -webkit-filter 0.3s ease-in-out;
          -webkit-filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.2));
                  filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.2)); }
        .table__responsive-container.table__responsive-container--is-striped.table__responsive-container--gray-borders .table__responsive-header .table__sticky-heading {
          border-left: #7c7c7c 1px solid;
          border-bottom: #ddd 1px solid; }
          .table__responsive-container.table__responsive-container--is-striped.table__responsive-container--gray-borders .table__responsive-header .table__sticky-heading:first-child {
            border-left: 1px solid #ddd; }
      .table__responsive-container.table__responsive-container--gray-borders .table__visual-caption {
        border: #7c7c7c 1px solid;
        border-bottom: none; }
      .table__responsive-container.table__responsive-container--gray-borders table > tbody > tr:first-child th, .table__responsive-container.table__responsive-container--gray-borders table > tbody > tr:first-child td {
        border-top: none; }
      .table__responsive-container.table__responsive-container--gray-borders .table__responsive-header .table__sticky-heading {
        border-left: #ddd 1px solid;
        border-top: #ddd 1px solid;
        border-bottom: #ddd 1px solid; }
        .table__responsive-container.table__responsive-container--gray-borders .table__responsive-header .table__sticky-heading:first-child {
          border-left: 1px solid #ddd; }
      .table__responsive-container table {
        width: 100%; }
        .table__responsive-container table.is-striped, .table__responsive-container table.table--is-striped {
          border: none; }
        .table__responsive-container table caption {
          position: absolute !important;
          height: 1px;
          width: 1px;
          overflow: hidden;
          clip: rect(1px, 1px, 1px, 1px); }
      .table__responsive-container.table--is-sticky-left.table--left-sticky-minwidth .table__sticky-heading:first-child {
        border-right: 1px solid #ccc; }
      .table__responsive-container .table__responsive-header__sticky-heading:first-child {
        border-right: 1px solid #fff;
        transition: border-right 0.3s ease-in-out; }
      .table__responsive-container.table--is-sticky-left.table__responsive-container--is-striped.table--left-sticky-minwidth .table__sticky-heading:first-child {
        border-right: none; }
      .table__responsive-container.table--left-sticky-minwidth table tbody th {
        position: -webkit-sticky;
        position: sticky; }
      .text-formatted .table__responsive-container div {
        line-height: inherit;
        font-size: 1rem;
        margin-bottom: 0; }
    
    .table__visual-caption {
      width: 100%;
      padding: 1.05rem;
      text-align: center;
      font-size: 1rem;
      color: #fff;
      text-transform: uppercase;
      background-color: #333;
      font-weight: bold; }
    
    .table__responsive-header {
      position: -webkit-sticky;
      position: sticky;
      z-index: 1;
      top: 0; }
      .table__responsive-header__scroller {
        white-space: nowrap;
        overflow-x: hidden; }
      .table__responsive-container--is-striped .table__responsive-header .table__sticky-heading {
        background: #FFCD00;
        text-transform: uppercase;
        border: none; }
    
    .table__sticky-heading {
      display: inline-block;
      padding: 1.05rem;
      vertical-align: bottom;
      font-size: 1rem;
      color: #151515;
      background-color: #fff;
      border-bottom: 1px solid #cccccc;
      text-align: left; }
      .table__sticky-heading .text-positioner {
        white-space: break-spaces;
        display: flex;
        align-items: flex-end;
        width: 100%;
        height: 100%;
        font-weight: bold; }
    
    .table__container {
      overflow-x: auto; }
    
    .table.table--static tbody th,
    .table.table--static thead th {
      position: static; }
    
  • URL: /components/raw/tables/tables.css
  • Filesystem Path: src/components/tables/tables.css
  • Size: 9.7 KB
  • Content:
    let resizeTimer;
    
    document.addEventListener("DOMContentLoaded", function () {
        generateResponsiveTables();
    });
    
    // Instantiate tables on the page.
    function generateResponsiveTables() {
        // Only instantiate tables that are not pre defined by the user as 'table-static'.
        let selector = 'table:not(.table--static)';
    
        // If there is a defined hook to change the selector, then change it.
        if (typeof hook_modifyTableSelector === "function") {
            selector = hook_modifyTableSelector(selector);
        }
    
        let tables = document.querySelectorAll(selector);
    
        for (let i = 0; i < tables.length; i++) {
            let table = tables[i];
            if (!table.closest('.table__responsive-container')) {
                // Set the table to have a class defining it as responsive.
                table.classList.add('table__responsive');
    
                // If the table is default width, capture its initial width.
                let table_offsetWidth = table.offsetWidth;
    
                // Set table header HTML for future use.
                let header_HTML = '';
    
                //Prepare table caption variables.
                let caption_id = '';
                let caption_HTML = '';
                let caption_labeledby = '';
    
                // If the table caption exists...
                if (table.getElementsByTagName('caption')[0]) {
                  let caption = table.getElementsByTagName('caption');
    
                  // And if table caption doesnt have an Id...
                  if(!caption[0].id) {
                    caption_id = 'table--' + i;
                    caption_labeledby = 'aria-labelledby="' + caption_id + '"';
    
                    //Give the caption an Id.
                    caption[0].id = caption_id;
                  }
    
                  // Make a duplicate caption hidden from aria for sighted users.
                  caption_HTML = '<div class="table__visual-caption" aria-hidden="true">' + caption[0].innerHTML + '</div>';
                }
    
                // Determine if there are thead TH's without scope.
                if (table.querySelectorAll('thead tr th')[0] && table.querySelectorAll('thead tr')[0].lastElementChild.tagName === 'TH') {
                    let theads = table.querySelectorAll('thead tr th');
                    for (let j = 0; j < theads.length; j++) {
                        let thead = theads[j];
                        if (!thead.hasAttribute('scope')) {
    
                            // If they dont have the scope attribute, give thema  scope of "col".
                            thead.setAttribute('scope', 'col');
                        };
    
                        thead.classList.add("table__invisible-header");
                        thead.setAttribute('data-table-heading', 't-' + i + '-h-' + j);
    
                        // Give the html to header_HTML for later usage.
                        header_HTML = header_HTML +
                            '<div class="table__sticky-heading" data-scroller-heading="t-' + i + '-h-' + j + '">\
                                <div class="text-positioner">' +
                                    thead.innerHTML +
                                '</div>\
                            </div>'
                            ;
                    }
                };
    
                // Determine if there are tbody TH's without scope.
                let trows = table.querySelectorAll('tbody tr');
                let row_headers = '';
                for (let j = 0; j < trows.length; j++) {
                    let trow = trows[j];
                    if (trow.firstElementChild && trow.firstElementChild.tagName === 'TH') {
                        row_headers = 'table__row-headers--true';
    
                        if (!trow.firstElementChild.hasAttribute('scope')) {
                            // If they dont have the scope attribute, give thema  scope of "row".
                            trow.firstElementChild.setAttribute('scope', 'row');
                        };
                    }
                }
    
                // Create the header scroller with the header html we saved a while back.
                let header_scroller = '';
                if (header_HTML !== '') {
                    header_scroller = '\
                    <div id="table__header--' + i + '" class="table__responsive-header" aria-hidden="true">\
                        <div class="table__responsive-header__scroller syncscroll" name="sync-table-' + i + '">\
                            ' + header_HTML + '\
                        </div>\
                    </div>';
                }
    
    
                // Wrap the table in a responsive table div, and make sure aria knows what caption labels it, if any.
                // This should be done last as to not mess up any scoping of previous functions.
                let classes = (table.classList.contains('table--is-striped') || table.classList.contains('is-striped')) ? 'table__responsive-container--is-striped' : '';
    
                // If the table has the .table--gray-borders class, add .table__responsive-container--gray-borders to the responsive table container as well.
                if (table.classList.contains('table--gray-borders')) {
                  classes += ' table__responsive-container--gray-borders';
                }
    
                // If the table has .table--width-default then set a max width that will later be set on the measurer and the container.
                // Also add a class to the container classes for some extra styling.
                let table_elements_styles = '';
                if (table.classList.contains('table--width-default')) {
                  table_elements_styles = 'style="max-width:min(100%, ' + table_offsetWidth + 'px)"';
                  classes += ' table__responsive-container--width-default';
                }
    
                // Construct the table HTML.
                table.outerHTML =
                    '<div id="table__responsive-measurer--' + i + '" ' + table_elements_styles + '></div>' +
                    '<div id="table__responsive-container--' + i + '" class="table__responsive-container table ' + classes + ' ' + row_headers + '" role="region" ' + caption_labeledby + ' tabindex="0" ' + table_elements_styles + '>' +
                        caption_HTML +
                        header_scroller +
                        '<div class="table__container syncscroll" name="sync-table-' + i + '">' +
                            table.outerHTML +
                        '</div>' +
                    '</div>'
                ;
    
                // Grab necessary elements to measure scrolling so we can add sticky class.
                let table_bounding_box_selector = document.querySelector('#table__responsive-container--' + i);
                let table_bounding_box_selector_table_container = table_bounding_box_selector.querySelector('.table__container');
    
                // Add listeners for sticky class application.
                // Only add the listener for the headers if they exist.
                if (header_HTML !== '') {
                    document.addEventListener('scroll', throttle(tableSetStickyHeaders, table_bounding_box_selector, 300));
                }
    
                if (table.querySelectorAll('tbody tr th').length !== 0) {
                    table_bounding_box_selector_table_container.addEventListener('scroll', throttle(tableSetStickyHeaders, table_bounding_box_selector, 300));
                }
                if (header_HTML !== '' || table.querySelectorAll('tbody tr th').length !== 0) {
                    tableSetStickyHeaders(table_bounding_box_selector);
                }
            }
        }
    
        // Trigger the table to resize everything after the user has finished dragging the window.
        // We only do this when the window is done being dragged for performance reasons.
        window.addEventListener('resize', function () {
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(function () {
                triggerTableRespond();
            }, 250);
        });
    
        // Trigger the table to resize everything.
        // We do this here to resize on Instantiation.
        triggerTableRespond();
    }
    
    // This function will iterate through all tables, resize them, and then resize their headers.
    function triggerTableRespond() {
        let responsive_tables = document.querySelectorAll('.table__responsive-container');
    
        // This function can be defined by the user to add any functionality to this.
        if (typeof hook_triggerTableRespond === "function") {
            hook_triggerTableRespond(responsive_tables);
        }
    
        for (let i = 0; i < responsive_tables.length; i++) {
            // Resize the visible headers every window resize if they exist.
            if (document.querySelector('#table__header--' + i)) {
                resizeScrollerheaders(i);
            }
    
            // Check if the table is greater than 400px. If it is, add the class 'left-sticky-minwidth'.
            tableSetMinWidthClass(responsive_tables[i]);
        }
    }
    
    // This function resizes the headers for a given table "i".
    function resizeScrollerheaders(i) {
        let invisible_headers = document.querySelectorAll('#table__header--' + i + ' + .table__container table .table__invisible-header');
        for (let j = 0; j < invisible_headers.length; j++) {
            let header = invisible_headers[j]
            let header_tag = header.getAttribute('data-table-heading');
            let header_width = header.offsetWidth;
            let header_height = header.offsetHeight;
            let visible_header = document.querySelector('#table__header--' + i + ' [data-scroller-heading="' + header_tag + '"]');
            visible_header.style.width = header_width + 'px';
            visible_header.style.height = (header_height + 1) + 'px';
        }
        let table_container = document.querySelector('#table__header--' + i + ' + .table__container');
        let thead_height = table_container.querySelector('table thead').offsetHeight;
        table_container.style.marginTop = '-' + (thead_height + 1) + 'px';
    }
    
    /*!
     * Check if an element is out of the viewport
     * (c) 2018 Chris Ferdinandi, MIT License, https://gomakethings.com
     * https://gomakethings.com/how-to-check-if-any-part-of-an-element-is-out-of-the-viewport-with-vanilla-js/
     * @param  {Node}  elem The element to check
     * @return {Object}     A set of booleans for each side of the element
     */
    function tableSetStickyHeaders(elem) {
    
        let elem_table = elem.querySelector('.table__container table');
    
        // Get container element's bounding.
        var container_bounding = elem.getBoundingClientRect();
    
        // Get table element's bounding.
        var table_bounding = elem_table.getBoundingClientRect();
    
        // Check if it's out of the viewport on each side.
        var out = {};
        out.top = table_bounding.top < 0;
        out.left = table_bounding.left < container_bounding.left;
        out.left_back = table_bounding.left > container_bounding.left - 60;
    
    
        // Check if the top bounding box is out and if it is then assign appropriate class.
        if (out.top) {
            elem.classList.add('table--is-sticky-top');
        }
        else {
            elem.classList.remove('table--is-sticky-top');
        }
    
        // Check if the left bounding box is out and if it is then assign appropriate class.
        if (out.left) {
            elem.classList.add('table--is-sticky-left');
        }
        if (out.left_back) {
            elem.classList.remove('table--is-sticky-left');
        }
    };
    
    // Check if the table is greater than 400px. If it is, add the class 'left-sticky-minwidth'.
    function tableSetMinWidthClass(table) {
        let table_width = table.offsetWidth;
    
        if (table_width > 400) {
            table.classList.add("table--left-sticky-minwidth");
        }
        else {
            table.classList.remove("table--left-sticky-minwidth");
        }
    }
    
    // For throttling scroll functions.
    function throttle(fn, argument, wait) {
        var time = Date.now();
        return function () {
            if ((time + wait - Date.now()) < 0) {
                fn(argument);
                time = Date.now();
            }
        }
    }
    
    // This is the copied syncscroll script needed to maintain syncronized scrolling between the table and the viaual headers.
    // https://github.com/asvd/syncscroll
    !function (e, n) { "function" == typeof define && define.amd ? define(["exports"], n) : n("undefined" != typeof exports ? exports : e.syncscroll = {}) }(this, function (e) { var n = "Width", t = "Height", o = "Top", r = "Left", f = "scroll", i = "client", s = "EventListener", d = "add" + s, c = "length", a = Math.round, u = {}, l = function () { var e, l, p, y, m, h = document.getElementsByClassName("sync" + f); for (m in u) if (u.hasOwnProperty(m)) for (e = 0; e < u[m][c]; e++)u[m][e]["remove" + s](f, u[m][e].syn, 0); for (e = 0; e < h[c];)if (y = l = 0, p = h[e++], m = p.getAttribute("name")) { for (p = p[f + "er"] || p; l < (u[m] = u[m] || [])[c];)y |= u[m][l++] == p; y || u[m].push(p), p.eX = p.eY = 0, function (e, s) { e[d](f, e.syn = function () { var d, l = u[s], p = e[f + r], y = e[f + o], m = p / (e[f + n] - e[i + n]), h = y / (e[f + t] - e[i + t]), v = p != e.eX, g = y != e.eY, X = 0; for (e.eX = p, e.eY = y; X < l[c];)d = l[X++], d != e && (v && a(d[f + r] - (p = d.eX = a(m * (d[f + n] - d[i + n])))) && (d[f + r] = p), g && a(d[f + o] - (y = d.eY = a(h * (d[f + t] - d[i + t])))) && (d[f + o] = y)) }, 0) }(p, m) } }; "complete" == document.readyState ? l() : window[d]("load", l, 0), e.reset = l });
    
  • URL: /components/raw/tables/tables.js
  • Filesystem Path: src/components/tables/tables.js
  • Size: 13 KB
  • Content:
    @import '../../assets/scss/variables';
    @import '../../assets/scss/utilities';
    //// Table Elements
    
    table[border] {
      border-style: solid;
      border-color: #eee;
      td,
      th {
        border-color: #eee;
      }
    }
    
    table {
      width: 100%;
      font-size: $content-font-size;
      border-spacing: 0;
      border-collapse: collapse;
      color: $secondary;
      background-color: $white;
    
      td,
      th {
        padding: $md;
        vertical-align: bottom;
        font-size: $base-font-size;
      }
    
      th {
        color: $secondary;
    
        &:not([align]) {
          text-align: left;
        }
      }
    
      thead th {
        background-color: #fff;
        border-bottom: 1px solid #cccccc;
      }
    
      tbody th {
        background-color: #fff;
        border-right: 1px solid #cccccc;
        position: static;
        left: 0;
        padding-left: $md;
      }
    
      &.table--hover-highlight tbody tr:not(.is-selected),
      &.table--hover-highlight tbody tr:not(.is-selected):nth-child(even) {
        &:hover {
          th {
            background-color: #fff3c3
          }
    
          background-color: #fff3c3;
        }
      }
    
      &:not(.table__responsive) caption {
        width: 100%;
        padding: 1.05rem;
        text-align: center;
        font-size: 1rem;
        color: #fff;
        text-transform: uppercase;
        background-color: #333;
        font-weight: bold;
      }
    
      tbody tr:last-child td,
      tbody tr:last-child th {
        border-bottom-width: 0;
      }
    
      thead td,
      thead th {
        color: $secondary;
      }
    
      // DO NOT USE THE .is-striped CLASS. it is a legacy class, and you should be using .table--is-striped.
      &.is-striped,
      &.table--is-striped{
        border: 1px solid #eee;
    
        thead th {
          background: $primary;
          text-transform: uppercase;
          border: none;
        }
    
        tbody th {
          border: none;
        }
    
        tbody tr:not(.is-selected):nth-child(even),
        tbody tr:not(.is-selected):nth-child(even) th {
          background-color: $light;
        }
      }
    
      &.table--width-default {
        width: unset;
      }
    }
    
    table.table--gray-borders {
      border: #ddd 1px solid;
    
      & > tr,
      & > tbody > tr,
      & > tfoot > tr,
      & > thead > tr,
      & > caption {
        & > td,
        & > th {
          border: #ddd 1px solid;
        }
      }
    
      & > tbody > tr:first-child {
        th, td {
          border-top: none;
        }
      }
    
      // DO NOT USE THE .is-striped CLASS. it is a legacy class, and you should be using .table--is-striped.
      &.is-striped,
      &.table--is-striped {
        & > thead > tr,
        & > caption {
          & > td,
          & > th {
            border: #7c7c7c 1px solid;
          }
        }
    
        & > thead > tr {
          & > td,
          & > th {
            border-bottom: #ddd 1px solid;
            border-top: #ddd 1px solid;
    
            &:first-child {
              border-left: #ddd 1px solid;
            }
    
            &:last-child {
              border-right: #ddd 1px solid;
            }
          }
        }
      }
    }
    
    .table {
      &__responsive-container {
        width: 100%;
        position: relative;
    
        &--width-default {
          width: unset;
          display: inline-block;
    
          table.table--width-default {
            width: unset;
          }
        }
    
        &.table__row-headers--true {
    
          // A sticky heading is a heading in the JS generated table__responsive-header container.
          .table__sticky-heading:first-child {
            left: 0;
          }
    
          &.table--left-sticky-minwidth .table__sticky-heading:first-child {
            position: sticky;
          }
        }
    
        &.table__responsive-container--is-striped {
          border: 1px solid #eee;
    
          &.table__responsive-container--gray-borders {
            border: unset;
          }
    
          &.table--is-sticky-left.table--left-sticky-minwidth {
            // DO NOT USE THE .is-striped CLASS. it is a legacy class, and you should be using .table--is-striped.
            table.is-striped,
            table.table--is-striped{
              tbody th {
                filter: drop-shadow(0px 4px 2px rgba(0, 0, 0, 0.2));
              }
            }
    
    
            .table__sticky-heading:first-child {
              filter: drop-shadow(0px 4px 2px rgba(0, 0, 0, 0.2));
            }
          }
    
          &.table--is-sticky-top {
            .table__responsive-header {
              transition: filter 0.3s ease-in-out;
              filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.2));
            }
          }
    
          &.table__responsive-container--gray-borders .table__responsive-header .table__sticky-heading {
            border-left: #7c7c7c 1px solid;
            border-bottom: #ddd 1px solid;
    
            &:first-child {
              border-left: 1px solid #ddd;
            }
          }
        }
    
        &.table__responsive-container--gray-borders {
          .table__visual-caption {
            border: #7c7c7c 1px solid;
            border-bottom: none;
          }
    
          table > tbody > tr:first-child {
            th, td {
              border-top: none;
            }
          }
    
          .table__responsive-header .table__sticky-heading {
            border-left: #ddd 1px solid;
            border-top: #ddd 1px solid;
            border-bottom: #ddd 1px solid;
    
            &:first-child {
              border-left: 1px solid #ddd;
            }
          }
        }
    
        table {
          width: 100%;
    
          // DO NOT USE THE .is-striped CLASS. it is a legacy class, and you should be using .table--is-striped.
          &.is-striped,
          &.table--is-striped{
            border: none;
          }
    
          caption {
            @include element-invisible();
          }
        }
    
        &.table--is-sticky-left.table--left-sticky-minwidth .table__sticky-heading:first-child {
          border-right: 1px solid #ccc;
        }
    
        .table__responsive-header__sticky-heading:first-child {
          border-right: 1px solid #fff;
          transition: border-right 0.3s ease-in-out;
        }
    
        &.table--is-sticky-left.table__responsive-container--is-striped.table--left-sticky-minwidth .table__sticky-heading:first-child {
          border-right: none;
        }
    
        &.table--left-sticky-minwidth table tbody th {
          position: sticky;
        }
    
        .text-formatted & div {
          line-height: inherit;
          font-size: $base-font-size;
          margin-bottom: 0;
        }
      }
    
      &__visual-caption {
        width: 100%;
        padding: 1.05rem;
        text-align: center;
        font-size: 1rem;
        color: #fff;
        text-transform: uppercase;
        background-color: #333;
        font-weight: bold;
      }
    
      &__responsive-header {
        position: sticky;
        z-index: 1;
        top: 0;
    
        &__scroller {
          white-space: nowrap;
          overflow-x: hidden;
        }
    
        .table__responsive-container--is-striped & {
          .table__sticky-heading {
            background: $primary;
            text-transform: uppercase;
            border: none;
          }
        }
      }
    
      &__sticky-heading {
        display: inline-block;
        padding: $md;
        vertical-align: bottom;
        font-size: $base-font-size;
        color: $secondary;
        background-color: #fff;
        border-bottom: 1px solid #cccccc;
        text-align: left;
    
        .text-positioner {
          white-space: break-spaces;
          display: flex;
          align-items: flex-end;
          width: 100%;
          height: 100%;
          font-weight: bold;
        }
      }
    
      &__container {
        overflow-x: auto;
      }
    
      &.table--static {
    
        tbody th,
        thead th {
          position: static;
        }
      }
    }
    
  • URL: /components/raw/tables/tables.scss
  • Filesystem Path: src/components/tables/tables.scss
  • Size: 6.9 KB