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>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>
        <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>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>
        <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. */
  • Content:
    .table {
      width: 100%;
      max-width: 100%;
      border-bottom: 3px solid $table-border-color;
      margin-bottom: $spacer-xs;
      border-collapse: collapse;
      text-align: left;
    
      caption {
        @extend %heading-font-regular;
    
        margin-top: $spacer-xxs;
        caption-side: bottom;
        font-size: $font-size-xs;
      }
    
      thead,
      tfoot {
        @extend %heading-font-bold;
    
        background-color: $table-header-background-color;
        color: $table-header-text-color;
        font-size: $font-size-base;
    
        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;
        vertical-align: top;
      }
    }
    
    @media screen and (min-width: $grid-breakpoint-md) {
      .table {
        margin-bottom: $spacer-sm;
      }
    }
    
    // Responsive tables code taken from BS4
    
    @media screen and (max-width: $grid-breakpoint-sm) {
      .table {
        display: block;
        width: 100%;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        overflow-x: auto;
      }
    }
    
  • URL: /components/raw/table/_table.scss
  • Filesystem Path: components/05-atoms/text/block/table/_table.scss
  • Size: 1.2 KB

No notes defined.