.gridtable {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid $color-l1;
  th {
    background-color: $color-l1;
    text-align: left;
  }
  td,
  th {
    text-align: left;
  }
  tbody tr {
    max-height: 500px;
  }
}

@media (min-width: $screen-sm-min) {
  table.gridtable {
    td,
    th {
      border: 1px solid $color-l1;
      padding: $g1 !important;
    }
    tbody {
      tr {
        height: auto !important;
      }
      tr:nth-of-type(even) {
        background: #fafafa;
      }
    }
  }
}

@media (max-width: $screen-xs-max) {
  table.gridtable {
    display: block;
    position: relative;
    tbody,
    td,
    th,
    thead,
    tr {
      display: block;
    }
    thead tr {
      position: absolute;
      top: -9999px;
      left: -9999px;
      z-index: -1;
    }
    tr {
      border-bottom: dashed 1px $color-l1;
      overflow: hidden;
      @include clearFloat();
      td {
        margin: 0 $g1;
        padding: 0;
        word-break: break-all;
        &:before {
          float: left;
          content: attr(data-th) ": ";
        }
      }
      &.open {
        position: relative;
      }
      &.close {
        max-height: 3em;
        position: relative;
        cursor: pointer;
        opacity: 0.8;
        @include hover() {
            opacity: 1;
        }
        td {
          @include singleline();
        }
      }
      &:last-child {
        border-bottom: none;
      }
    }
    tbody {
      td {
        border: none;
        position: relative;
      }
      td:before {
        color: $color-l1;
        @include singleline();
        display: inline-block;
        width: 6.5rem;
      }
    }
  }
}