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>
 
<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. */
  • 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

No notes defined.