# Table

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <table class="table">
        <caption>Impressive caption</caption>
        <thead>
            <tr>
                <th>Table Heading 1</th>
                <th>Table Heading 2</th>
                <th>Table Heading 3</th>
                <th>Table Heading 4</th>
                <th>Table Heading 5</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><b>BOLD Table Cell 1 </b></td>
                <td>Table Cell 2</td>
                <td>Table Cell 3</td>
                <td>Table Cell 4</td>
                <td>Table Cell 5</td>
            </tr>
            <tr>
                <td>Table Cell 1</td>
                <td>Table Cell 2</td>
                <td>Table Cell 3</td>
                <td>Table Cell 4</td>
                <td>Table Cell 5</td>
            </tr>
            <tr>
                <td>Table Cell 1</td>
                <td>Table Cell 2</td>
                <td>Table Cell 3</td>
                <td>Table Cell 4</td>
                <td>Table Cell 5</td>
            </tr>
            <tr>
                <td>Table Cell 1</td>
                <td>Table Cell 2</td>
                <td>Table Cell 3</td>
                <td>Table Cell 4</td>
                <td>Table Cell 5</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>Table Footer 1</th>
                <th>Table Footer 2</th>
                <th>Table Footer 3</th>
                <th>Table Footer 4</th>
                <th>Table Footer 5</th>
            </tr>
        </tfoot>
    </table>

`
`

    <table class="table">
        <caption>Impressive caption</caption>
        <thead>
            <tr>
                <th>Table Heading 1</th>
                <th>Table Heading 2</th>
                <th>Table Heading 3</th>
                <th>Table Heading 4</th>
                <th>Table Heading 5</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><b>BOLD Table Cell 1 </b></td>
                <td>Table Cell 2</td>
                <td>Table Cell 3</td>
                <td>Table Cell 4</td>
                <td>Table Cell 5</td>
            </tr>
            <tr>
                <td>Table Cell 1</td>
                <td>Table Cell 2</td>
                <td>Table Cell 3</td>
                <td>Table Cell 4</td>
                <td>Table Cell 5</td>
            </tr>
            <tr>
                <td>Table Cell 1</td>
                <td>Table Cell 2</td>
                <td>Table Cell 3</td>
                <td>Table Cell 4</td>
                <td>Table Cell 5</td>
            </tr>
            <tr>
                <td>Table Cell 1</td>
                <td>Table Cell 2</td>
                <td>Table Cell 3</td>
                <td>Table Cell 4</td>
                <td>Table Cell 5</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>Table Footer 1</th>
                <th>Table Footer 2</th>
                <th>Table Footer 3</th>
                <th>Table Footer 4</th>
                <th>Table Footer 5</th>
            </tr>
        </tfoot>
    </table>

`
`

    /* No context defined. */

`
File:

- Content:
  `

      .table {
        border-collapse: collapse;

        width: 100%;
        max-width: 100%;

        text-align: left;

        border-bottom: 3px solid $table-border-color;

        caption {
          @extend %heading-font-regular;

          caption-side: bottom;
          margin-top: $spacer-xxs;
          font-size: $font-size-xs;
        }

        thead,
        tfoot {
          @extend %heading-font-bold;

          font-size: $font-size-base;
          line-height: $heading-line-height;
          color: $table-header-text-color;
          background-color: $table-header-background-color;

          th {
            padding: $spacer-sm $spacer-xs;
            text-align: left;
          }
        }

        tbody {
          tr {
            border-bottom: 1px solid $table-row-border-color;

            &:nth-child(odd) {
              background-color: $table-row-color-dark;
            }
          }
        }

        td {
          @extend %heading-font-regular;

          padding: $spacer-xs;
          font-size: $font-size-xs;
          line-height: $paragraph-line-height;
          vertical-align: top;
        }
      }

      // Responsive tables code taken from BS4
      @media screen and (max-width: $grid-breakpoint-sm) {
        .table {
          overflow-x: auto;
          display: block;

          width: 100%;

          -webkit-overflow-scrolling: touch;
          -ms-overflow-style: -ms-autohiding-scrollbar;
        }
      }

  `
- URL: /components/raw/table/_table.scss
- Filesystem Path: components/05-atoms/table/_table.scss
- Size: 1.2 KB

- Handle: @table
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/05-atoms/table/table.html

No notes defined.