Component Library

Table 

<div class="iastate22-table" role="region" aria-labelledby="caption1" tabindex="0">
    <table>
        <caption id="caption1">Table Caption Example</caption>
        <thead>
            <tr>
                <th>Long Header Lorem Ipsum Dolor Sit Amet</th>
                <th>Short Header</th>
                <th>Medium Header Lorem Ipsum</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Donec pede justo, fringilla vel, aliquet nec, vulputate</td>
                <td>Donec pede justo, fringilla vel, aliquet nec, vulputate</td>
                <td>Donec pede justo, fringilla vel, aliquet nec, vulputate</td>
            </tr>
            <tr>
                <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                <td>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</td>
                <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
            </tr>
            <tr>
                <td>Aenean massa nulla.</td>
                <td>Nulla consequat massa quis enim.</td>
                <td>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</td>
            </tr>
            <tr>
                <td>Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</td>
                <td>Aenean commodo ligula eget dolor.</td>
                <td>Nulla consequat massa quis enim.</td>
            </tr>
        </tbody>
    </table>
</div>
 
<div class="iastate22-table" role="region" aria-labelledby="{{ caption_ID }}" tabindex="0">
  <table>
    <caption id="{{ caption_ID }}">{{table_caption}}</caption>
      <thead>
          <tr>
              {% for header in headers %}
                  <th>{{ header }}</th>
              {% endfor %}
          </tr>
      </thead>
      <tbody>
          {% for row in rows %}
              <tr>
                  {% for column in row %}
                      <td>{{ column }}</td>
                  {% endfor %}
              </tr>
          {% endfor %}
      </tbody>
  </table>
</div>
 
{
  "caption_ID": "caption1",
  "table_caption": "Table Caption Example",
  "headers": [
    "Long Header Lorem Ipsum Dolor Sit Amet",
    "Short Header",
    "Medium Header Lorem Ipsum"
  ],
  "rows": [
    [
      "Donec pede justo, fringilla vel, aliquet nec, vulputate",
      "Donec pede justo, fringilla vel, aliquet nec, vulputate",
      "Donec pede justo, fringilla vel, aliquet nec, vulputate"
    ],
    [
      "Lorem ipsum dolor sit amet, consectetuer adipiscing elit.",
      "Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.",
      "Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
    ],
    [
      "Aenean massa nulla.",
      "Nulla consequat massa quis enim.",
      "Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem."
    ],
    [
      "Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.",
      "Aenean commodo ligula eget dolor.",
      "Nulla consequat massa quis enim."
    ]
  ]
}
  • Content: 
    .paragraph-widget--table {
  margin-right: rem(-36);
  @include media-breakpoint-up(md) {
    margin-right: 0;
  }
}

// table
.iastate22-table {
  background: linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(255, 255, 255, 0), #fff 70%) 0 100%,
    radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
  background-repeat: no-repeat;
  background-color: $white;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-position: 0 0, 100%, 0 0, 100%;
  background-attachment: local, local, scroll, scroll;
  overflow: auto;

  table {
    empty-cells: show;
    border-collapse: collapse;
    border: 0;
    padding: 0;
    margin: 0;
    color: black;
    border: rem(2) solid $light-grey;
    overflow: auto;
    > :not(:first-child) {
      border-top: none;
    }
  }

  caption {
    @extend %visible-for-screen-readers;
  }

  thead {
    text-align: left;
    tr {
      background-color: $iastate-red;
      color: $white;
    }
    th {
      padding: rem(25);
      font-family: $typeface-sans-serif;
      font-size: rem(21);
      line-height: (30 / 21);
      font-weight: 700;
      vertical-align: top;
    }
  }

  tbody {
    border-top: none;
    tr {
      &:nth-child(even) {
        background-color: rgba($black, 0.048);
      }
    }
    td {
      padding: rem(25);
      min-width: rem(225);
      max-width: 90vw;
      vertical-align: top;
      border: rem(1) solid $off-white2;
      line-height: 1.5;
      @include media-breakpoint-up(md) {
        min-width: initial;
        line-height: 1.75;
      }
      &:first-child {
        font-family: $typeface-sans-serif;
        font-weight: 700;
        color: $iastate-red;
      }

      a,
      .tel {
        color: $iastate-maroon;
        text-decoration: underline;
        transition: all 0.3s ease-out;
      }

      .tel {
        font-weight: 600;
      }

      a {
        font-weight: 700;
        &:hover,
        &:focus {
          transition: all 0.2s ease-out;
          text-decoration-color: rgba($iastate-red, 1);
          color: $iastate-red;
        }
      }
    }
  }
}

a {
  transition: $link-transition;
  &:hover {
    color: $iastate-red;
  }
}
  • URL: /components/raw/table/_table.scss
  • Filesystem Path: src/components/table/_table.scss
  • Size: 2.3 KB

Table

This is a custom component (the class has been prefaced with .iastate22-[classname]).

  • The table is built to allow for horizontal scrolling on mobile, flush to the right edge of the device/screen
  • The custom styles are imported into the index.scss file as @import "../components/table/table";
  • There is a paragraph-widget wrapper for use in page context <div class="paragraph-widget paragraph-widget--table">.