Tables

Basic

This table is responsive and will restructure data on smaller devices. This also lends well to the table being included in other components, such as tabs for example. Just be mindful that you may have to override padding styles on the container component so that the table touches the bounds, as demonstrated here.

Column Header 1 Column Header 2 Column Header 3 Column Header 4
Content 1 Content 1 Content 1 Content 1
Content 2 Content 2 Content 2 Content 2
Content 3 Content 3 Content 3 Content 3
Content 4 Content 4 Content 4 Content 4

<table>
  <thead>
    <tr>
      <th>Column Header 1</th>
      <th>Column Header 2</th>
      <th>Column Header 3</th>
      <th>Column Header 4</th>
    <tr>
  </thead>
  <tbody>
    <tr>
      <td data-th="Column Header 1">Content 1</td>
      <td data-th="Column Header 2">Content 1</td>
      <td data-th="Column Header 3">Content 1</td>
      <td data-th="Column Header 4">Content 1</td>
    </tr>
    <tr>
      <td data-th="Column Header 1">Content 2</td>
      <td data-th="Column Header 2">Content 2</td>
      <td data-th="Column Header 3">Content 2</td>
      <td data-th="Column Header 4">Content 2</td>
    </tr>
    <tr>
      <td data-th="Column Header 1">Content 3</td>
      <td data-th="Column Header 2">Content 3</td>
      <td data-th="Column Header 3">Content 3</td>
      <td data-th="Column Header 4">Content 3</td>
    </tr>
    <tr>
      <td data-th="Column Header 1">Content 4</td>
      <td data-th="Column Header 2">Content 4</td>
      <td data-th="Column Header 3">Content 4</td>
      <td data-th="Column Header 4">Content 4</td>
    </tr>
  </tbody>
</table>

table
  thead
    tr
      th Column Header 1
      th Column Header 2
      th Column Header 3
      th Column Header 4
    tr
  tbody
    tr
      td(data-th='Column Header 1') Content 1
      td(data-th='Column Header 2') Content 1
      td(data-th='Column Header 3') Content 1
      td(data-th='Column Header 4') Content 1
    tr
      td(data-th='Column Header 1') Content 2
      td(data-th='Column Header 2') Content 2
      td(data-th='Column Header 3') Content 2
      td(data-th='Column Header 4') Content 2
    tr
      td(data-th='Column Header 1') Content 3
      td(data-th='Column Header 2') Content 3
      td(data-th='Column Header 3') Content 3
      td(data-th='Column Header 4') Content 3
    tr
      td(data-th='Column Header 1') Content 4
      td(data-th='Column Header 2') Content 4
      td(data-th='Column Header 3') Content 4
      td(data-th='Column Header 4') Content 4

/*  basic table styles */
table {
  margin-bottom: 1.25rem;
  border: none;
  table-layout: auto;
  color: #999cab;
  width: 100%;
}
table th {
  letter-spacing: 1px;
  font-size: .75rem;
  text-transform: uppercase;
  font-weight: normal;
  background: white;
  cursor: pointer;
  white-space: normal;
  text-align: left;
  display: table-cell;
  line-height: 1.125rem;
  vertical-align: middle;
  padding: 0.5rem 0.625rem 0.625rem;
}
table .selected::after {
  border-top: 8px solid #999cab;
}
table tbody tr:nth-child(odd) {
  background-color: #eafaff;
}
table tr td {
  font-size: .8rem;
  display: table-cell;
  line-height: 1.125rem;
  vertical-align: middle;
  padding: 0.5rem 0.625rem 0.625rem;
}

@media (max-width: 750px) {
  thead tr th {
    display: none;
  }
  tbody tr td {
    display: block;
  }
  tbody tr td:first-child {
    padding-top: 1rem;
  }
  tbody tr td:last-child {
    padding-bottom: 1rem;
  }
  tbody tr td:before {
    display: block;
    content: attr(data-th) ": ";
    text-transform: uppercase;
    width: 10rem;
  }
}

/*  basic table styles */
table {
  margin-bottom: 1.25rem;
  border: none;
  table-layout: auto;
  color: $gray;
  width: 100%;

    th {
      letter-spacing: 1px;
      font-size: .75rem;
      text-transform: uppercase;
      font-weight: normal;
      background: $white;
      cursor: pointer;
      white-space: normal;
      text-align: left;
      display: table-cell;
      line-height: 1.125rem;
      vertical-align: middle;
      padding: 0.5rem 0.625rem 0.625rem;
    }
    .selected::after  {
      border-top: 8px solid $gray;
    }
    tbody tr:nth-child(odd) {
        background-color: $lighterblue;
    }
    tr {
        td {
            font-size: .8rem;
            display: table-cell;
            line-height: 1.125rem;
            vertical-align: middle;
            padding: 0.5rem 0.625rem 0.625rem;
        }
    }
}

// restructure data on small screens
@media (max-width: 750px) {
  thead tr th {
    display: none;
  }
  tbody tr td {
    display: block;
    &:first-child {
      padding-top: 1rem;
    }
    &:last-child {
      padding-bottom: 1rem;
    }
    &:before {
      display: block;
      content: attr(data-th)": ";
      text-transform: uppercase;
      width: 10rem;
    }
  }
}

Selectable

This extends the basic table classes above. The only change required is to add the selectable class to the table element.

Column Header 1 Column Header 2 Column Header 3 Column Header 4
Content 1 Content 1 Content 1 Content 1
Content 2 Content 2 Content 2 Content 2
Content 3 Content 3 Content 3 Content 3
Content 4 Content 4 Content 4 Content 4
<!-- add selectable class to table -->

<table  class="selectable">
table.selectable
/*  selectable - includes basic styles */

table.selectable tbody tr:hover {
    background-color: #ccf2ff;
}
/*  selectable - includes basic styles */

table.selectable tbody tr:hover {
    background-color: $tablehover;
}

Column Sorting

The sorting table does not restructure data on smaller screens like the basic table so adding the sorting class name is required here. Containing the sorting table within a div with a class of responsive-sort will ensure horizontal scrolling is triggered on small screens.

The arrow was created with CSS so there is no need to grab an image; just include a class of sort-header in each th.

Please also note the sort functionality will need to be implemented with the logic used in each project and the table below is for display purposes only.

Column Header Column Header Column Header Column Header
Content 1 Content 1 Content 1 Content 1
Content 2 Content 2 Content 2 Content 2
Content 3 Content 3 Content 3 Content 3
Content 4 Content 4 Content 4 Content 4

<div class="responsive-sort">
  <table class="sort">
    <thead>
      <tr>
        <th class="sort-header selected">Column Header</th>
        <th class="sort-header">Column Header</th>
        <th class="sort-header">Column Header</th>
        <th class="sort-header">Column Header</th>
      </tr>
    </thead>
    <tbody>
      <!-- Insert basic table markup -->
    </tbody>
  </table>
</div>

.responsive-sort
    table.sort
      thead
        tr
          th.sort-header.selected Column Header
          th.sort-header Column Header
          th.sort-header Column Header
          th.sort-header Column Header
      tbody
        // Insert basic table markup

/* Sorting table specific styles expanded from basic */
.sort-header::after {
  display: inline-block;
  margin-left: 3px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 8px solid #e5e6ea;
  content: ' ';
}

.responsive-sort {
  overflow: auto;
  width: 100%;
}

/* turns off responsive table query on small screens */
@media (max-width: 750px) {
  .sort {
    overflow: auto;
  }
  .sort thead tr th {
    display: table-cell;
  }
  .sort tbody tr td {
    display: table-cell;
  }
  .sort tbody tr td:first-child {
    padding-top: inherit;
  }
  .sort tbody tr td:last-child {
    padding-bottom: inherit;
  }
  .sort tbody tr td:before {
    display: none;
  }
}

/* Sorting table specific styles expanded from basic */
.sort-header::after {
  display: inline-block;
  margin-left: 3px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 8px solid $lightgray;
  content: ' ';
}

.responsive-sort {
  overflow: auto;
  width: 100%;
}

/* turns off responsive table query on small screens */
@media (max-width: 750px) {
  .sort {
    overflow: auto;
    thead tr th {
      display: table-cell;
    }
    tbody tr td {
      display: table-cell;
      &:first-child {
        padding-top: inherit;
      }
      &:last-child {
        padding-bottom: inherit;
      }
      &:before {
        display: none;
      }
    }
  }
}

Accordion

The accordion we use is built out of pure HTML and SCSS, there is no JavaScript required.

Content for Option 1

Content for Option 2

Content for Option 3

<section id="accordion">
    <div>
        <input type="checkbox" id="check-1" />
        <label for="check-1">Option 1</label>
        <article>
            <p>Content for Option 1</p>
        </article>
    </div>
    <div>
        <input type="checkbox" id="check-2" />
        <label for="check-2">Option 2</label>
        <article>
             <p>Content for Option 2</p>
        </article>
    </div>
    <div>
        <input type="checkbox" id="check-3" />
        <label for="check-3">Option 3</label>
        <article>
            <p>Content for Option 3</p>
        </article>
    </div>
    </section>
section#accordion
  div
    input#check-1(type='checkbox')
    label(for='check-1') Option 1
    article
      p Content for Option 1
  div
    input#check-2(type='checkbox')
    label(for='check-2') Option 2
    article
      p Content for Option 2
  div
    input#check-3(type='checkbox')
    label(for='check-3') Option 3
    article
      p Content for Option 3
#accordion input {
  display: none;
}
#accordion label {
  background: #fff url(../images/icon-plus.png) no-repeat 99% center;
  cursor: pointer;
  display: block;
  padding: 15px;
  z-index: 20;
  color: #0099ff;
  font-size: .9em;
  text-transform: none;
}
#accordion input:checked + label {
  background: #eafaff url(../images/icon-minus.png) no-repeat 99% center;
  margin-bottom: 0;
}
#accordion article {
  background: #eafaff;
  height: 0px;
  overflow: hidden;
  z-index: 10;
}
#accordion article p {
    padding: 1.5em 1em;
}
#accordion input:checked ~ article {
  height: auto;
  margin-bottom: .125em;
}
#accordion {
    input {
        display: none;
    }
    label {
        background: #fff url(../images/icon-plus.png) no-repeat 99% center;
        cursor: pointer;
        display: block;
        padding:15px;
        z-index: 20;
        color: $blue;
        font-size: .9em;
        text-transform: none;
    }

    input:checked + label {
        background: $lighterblue url(../images/icon-minus.png) no-repeat 99% center;
        margin-bottom: 0;
    }

    article {
        background: $lighterblue;
        height:0px;
        overflow:hidden;
        z-index:10;
            p {
            padding: 1.5em 1em;
        }
    }

    input:checked ~ article {
        height: auto;
        margin-bottom: .125em;
    }
}