Lehigh Clutch Style Guide

Table: Row Heading 

<table class="table">
    <thead>
        <tr>
            <th scope="col">Table Heading 1</th>
            <th scope="col">Table Heading 2</th>
            <th scope="col">Table Heading 3</th>
            <th scope="col">Table Heading 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Lorem</td>
            <td>Cras</td>
            <td>Aenean</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Ipsum</td>
            <td>Vestibulum</td>
            <td>Praesent</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Nam</td>
            <td>Aenean</td>
            <td>Donec</td>
        </tr>
    </tbody>
</table>
 
<table class="table">
  <thead>
  <tr>
    <th scope="col">Table Heading 1</th>
    <th scope="col">Table Heading 2</th>
    <th scope="col">Table Heading 3</th>
    <th scope="col">Table Heading 4</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <th scope="row">1</th>
    <td>Lorem</td>
    <td>Cras</td>
    <td>Aenean</td>
  </tr>
  <tr>
    <th scope="row">2</th>
    <td>Ipsum</td>
    <td>Vestibulum</td>
    <td>Praesent</td>
  </tr>
  <tr>
    <th scope="row">3</th>
    <td>Nam</td>
    <td>Aenean</td>
    <td>Donec</td>
  </tr>
  </tbody>
</table>
 
/* No context defined. */
  • Content: 
    .table,
.table-striped {
  border-radius: 4px;
  border-spacing: 0;
  margin: $spacer 0;
  width: 100%;

  .color-scheme-dark & {
    color: $white;
    color: var(--white, $white);
  }

  thead {
    tr {
      background-color: $lehigh_brown;
      background-color: var(--lehigh_brown, $lehigh_brown);
      color: $white;
      color: var(--white, $white);

      .color-scheme-dark & {
        background-color: $lehigh_brown_darkmode;
        background-color: var(--lehigh_brown_darkmode, $lehigh_brown_darkmode);
        color: $base_font;
        color: var(--base_font, $base_font);
      }
    }
  }

  th {
    background-color: $lehigh_brown;
    background-color: var(--lehigh_brown, $lehigh_brown);
    color: $white;
    color: var(--white, $white);

    .color-scheme-dark & {
      background-color: $lehigh_brown_darkmode;
      background-color: var(--lehigh_brown_darkmode, $lehigh_brown_darkmode);
      color: $base_font;
      color: var(--base_font, $base_font);
    }

    a {
      word-break: unset;
      color: $white;
      color: var(--white, $white);

      &:hover,
      &:focus {
        color: $white;
        color: var(--white, $white);
      }

      span {
        color: $white;
        color: var(--white, $white);

        &:hover,
        &:focus {
          color: $white;
          color: var(--white, $white);
        }
      }
    }
  }

  tr {
    &:nth-of-type(even){
      background-color: $grey_20;
      background-color: var(--grey_20, $grey_20);

      .color-scheme-dark & {
        background-color: $dark_mode_grey;
        background-color: var(--dark_mode_grey, $dark_mode_grey);
        color: $white;
        color: var(--white, $white);
      }
    }

    &:nth-of-type(odd){
      background-color: $white !important;
      background-color: var(--white, $white) !important;

      .color-scheme-dark & {
        background-color: $black;
        background-color: var(--black, $black);
        color: $white;
        color: var(--white, $white);
      }
    }
  }

  td {
    a {
      word-break: unset;
    }
  }
}

body.color-scheme-dark {
  .table.cke_show_border {
    color: $base_font;
    color: var(--base_font, $base_font);

    thead {
      tr {
        background-color: $grey_20;
        background-color: var(--grey_20, $grey_20);
        color: $base_font;
        color: var(--base_font, $base_font);
      }
    }

    tr {
      &:nth-of-type(even) {
        background-color: $grey_20;
        background-color: var(--grey_20, $grey_20);
        color: $base_font;
        color: var(--base_font, $base_font);
      }
    }
  }
}
  • URL: /components/raw/table/table.scss
  • Filesystem Path: bits/02-general/table/table.scss
  • Size: 2.6 KB

Show the HTML table with heading in the row.