.dv-table {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-spacing: 0;
  border-collapse: collapse;
  border: $border-width solid rgba(255, 255, 255, 0);

  colgroup {
    col {
      overflow: hidden;
    }
  }

  table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
  }

  &-header {
    .dv-table-cell {
      height: $component-size;
    }
  }

  &-body-wrap {
    flex: 1;
    overflow-y: scroll;
  }

  &-body {
  }

  &.scrollable {
    .dv-table-body {
    }

    .dv-table-body-wrap {
      overflow-y: hidden;
    }
  }

  &-cell {
    display: block;
    height: $component-size;
    padding: 0 $content-padding;
    overflow: hidden;
    line-height: $component-size;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: center;
  }

  thead {
    background: -webkit-linear-gradient(right, rgba($dv-dark-primary-color1, 0), rgba($dv-dark-primary-color1, 1), rgba($dv-dark-primary-color1, 0));
  }

  tbody {

  }

  th {
    font-weight: bold;
    color: $dv-dark-primary-color;

    .dv-table-cell {
      font-size: $font-size;
      font-weight: bold;
    }
  }

  td {
    font-size: $font-size;
    color: $dv-dark-primary-text-color;
  }

  td,
  th {
    overflow: hidden;
    font-weight: normal;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: $border-width solid rgba(255, 255, 255, 0);
  }

  tbody {
    tr {
      &:nth-child(2n) {
        background: -webkit-linear-gradient(right, rgba($dv-dark-highlight-background, 0), rgba($dv-dark-highlight-background, 1), rgba($dv-dark-highlight-background, 0));
      }

      td {
        overflow: hidden;
      }
    }
  }
}