Web Design Guide 2023-12-11 10:29:21 | 2.0.0

Table 

<!-- Default -->
<table class=" table ">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1.1</td>
            <td>1.2</td>
            <td>1.3</td>
        </tr>
        <tr>
            <td>2.1</td>
            <td>2.2</td>
            <td>2.3</td>
        </tr>
        <tr>
            <td>3.1</td>
            <td>3.2</td>
            <td>3.3</td>
        </tr>
        <tr>
            <td>4.1</td>
            <td>4.2</td>
            <td>4.3</td>
        </tr>
        <tr>
            <td>5.1</td>
            <td>5.2</td>
            <td>5.3</td>
        </tr>
    </tbody>
</table>


<!-- Headline -->
<table class=" table -headline">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1.1</td>
            <td>1.2</td>
            <td>1.3</td>
        </tr>
        <tr>
            <td>2.1</td>
            <td>2.2</td>
            <td>2.3</td>
        </tr>
        <tr>
            <td>3.1</td>
            <td>3.2</td>
            <td>3.3</td>
        </tr>
        <tr>
            <td>4.1</td>
            <td>4.2</td>
            <td>4.3</td>
        </tr>
        <tr>
            <td>5.1</td>
            <td>5.2</td>
            <td>5.3</td>
        </tr>
    </tbody>
</table>


<!-- Stripes -->
<table class=" table -stripes">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1.1</td>
            <td>1.2</td>
            <td>1.3</td>
        </tr>
        <tr>
            <td>2.1</td>
            <td>2.2</td>
            <td>2.3</td>
        </tr>
        <tr>
            <td>3.1</td>
            <td>3.2</td>
            <td>3.3</td>
        </tr>
        <tr>
            <td>4.1</td>
            <td>4.2</td>
            <td>4.3</td>
        </tr>
        <tr>
            <td>5.1</td>
            <td>5.2</td>
            <td>5.3</td>
        </tr>
    </tbody>
</table>


<table class="{{mixes}} table {{modifiers}}">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1.1</td>
      <td>1.2</td>
      <td>1.3</td>
    </tr>
    <tr>
      <td>2.1</td>
      <td>2.2</td>
      <td>2.3</td>
    </tr>
    <tr>
      <td>3.1</td>
      <td>3.2</td>
      <td>3.3</td>
    </tr>
    <tr>
      <td>4.1</td>
      <td>4.2</td>
      <td>4.3</td>
    </tr>
    <tr>
      <td>5.1</td>
      <td>5.2</td>
      <td>5.3</td>
    </tr>
  </tbody>
</table>
 
/* Default: No context defined */


/* Headline */
{
  "modifiers": "-headline"
}


/* Stripes */
{
  "modifiers": "-stripes"
}
  • Content: 
    /* Table */

.table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;

  thead tr {
    border-bottom: 2px solid $black;

    th {
      padding: 0 1.2rem 0.6rem;
    }
  }

  tbody tr {
    border-top: 0;
    border-bottom: 1px solid $black;

    &:nth-child(n) {
      background-color: $white;
    }
  }

  &.-headline {
    tbody:first-child {
      tr:first-child {
        @include typography-level('table-header');

        border-top: 0 solid $gray-light;
        border-bottom: 2px solid $black;

        td {
          padding: 0 1.2rem 0.6rem;
        }
      }
    }
  }

  &.-stripes {
    thead tr {
      background-color: $table-zebra-color;

      th {
        padding: 0.6rem 1.2rem;
      }
    }

    tbody {
      tr {
        border-top: 0 none;
        border-bottom: 0 none;

        &:nth-child(even) {
          background-color: $table-zebra-color;
        }
      }

      &:first-child tr {
        border-top: 0 none;
        border-bottom: 0 none;
        background: none;

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

  &.-headline.-stripes {
    tbody:first-child {
      tr:first-child {
        td {
          padding: 0.6rem 1.2rem;
        }
      }
    }
  }
}

th {
  text-align: inherit;
}
  • URL: /components/raw/molecules-table/_table.scss
  • Filesystem Path: src/components/02-ui-components/02-molecules/23-table/_table.scss
  • Size: 1.3 KB

There are no notes for this item.