Partystreusel

Table: Wrapped 

<div class="table-wrapper">
      <table>
          <thead>
              <tr>
                  <th>Header A</th>
                  <th>Header B</th>
                  <th>Header C</th>
                  <th>Header D</th>
                  <th>Header E</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td>Row 0 with long copy</td>
                  <td>Row 0</td>
                  <td>Row 0 with long</td>
                  <td>Row 0</td>
                  <td>Row 0</td>
              </tr>
              <tr>
                  <td>Row 1 with long copy</td>
                  <td>Row 1</td>
                  <td>Row 1 with long</td>
                  <td>Row 1</td>
                  <td>Row 1</td>
              </tr>
              <tr>
                  <td>Row 2 with long copy</td>
                  <td>Row 2</td>
                  <td>Row 2 with long</td>
                  <td>Row 2</td>
                  <td>Row 2</td>
              </tr>
              <tr>
                  <td>Row 3 with long copy</td>
                  <td>Row 3</td>
                  <td>Row 3 with long</td>
                  <td>Row 3</td>
                  <td>Row 3</td>
              </tr>
              <tr>
                  <td>Row 4 with long copy</td>
                  <td>Row 4</td>
                  <td>Row 4 with long</td>
                  <td>Row 4</td>
                  <td>Row 4</td>
              </tr>
          </tbody>
          <tfoot>
              <tr>
                  <th>Footer A</th>
                  <th>Footer B</th>
                  <th>Footer C</th>
                  <th>Footer D</th>
                  <th>Footer E</th>
              </tr>
          </tfoot>
      </table>
  </div>
 
{{#if wrapped}}
  <div class="table-wrapper">
{{/if}}
  <table>
    <thead>
      <tr>
        <th>Header A</th>
        <th>Header B</th>
        <th>Header C</th>
        <th>Header D</th>
        <th>Header E</th>
      </tr>
    </thead>
    <tbody>
      {{#each rows}}
      <tr>
        <td>Row {{@index}} with long copy</td>
        <td>Row {{@index}}</td>
        <td>Row {{@index}} with long</td>
        <td>Row {{@index}}</td>
        <td>Row {{@index}}</td>
      </tr>
      {{/each}}
    </tbody>
    <tfoot>
      <tr>
        <th>Footer A</th>
        <th>Footer B</th>
        <th>Footer C</th>
        <th>Footer D</th>
        <th>Footer E</th>
      </tr>
    </tfoot>
  </table>
{{#if wrapped}}
  </div>
{{/if}}
 
{
  "rows": [
    "Row 1",
    "Row 2",
    "Row 3",
    "Row 4",
    "Row 5"
  ],
  "wrapped": true
}
  • Content: 
    $table__space: rem(8);

.table-wrapper {
  margin: rem(24) 0;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-spacing: 0;
}

thead {
  color: $color__bright;
  text-align: left;
}

th {
  background-color: $color__brand--dark;
}

td,
th {
  min-width: rem(100);
  padding: $table__space;
  border-right: rem(2) solid $color__accent--dark;

  &:last-child {
    border-right: 0;
  }
}

tbody {
  tr {
    transition: all 0.1s linear;
    background-color: $color__bright;

    &:nth-child(odd) {
      background-color: $color__accent--light;
      color: $color__accent--dark;
    }

    &:hover {
      background-color: $color__brand--two;
      color: $body__font-color;
    }
  }
}

@include mq(large) {
  .table-wrapper {
    overflow-x: hidden;
  }
}
  • URL: /components/raw/table/_table.scss
  • Filesystem Path: patterns/01-atoms/table/_table.scss
  • Size: 803 Bytes

Wrap the table with a <div class'table-wrapper'></div> for horizontal scrolling on small screen