.table-responsive {

display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;

}

%disabled-td {

cursor: not-allowed;
background-color: #ddd;
color: #333;
box-shadow: inset 0 -1px #c7c7c7;

}

.table {

width: 100%;
margin-bottom: 1rem;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-collapse: collapse;
font-size: 13px;
text-align: left;

thead {
  background-color: #f7fafc;
  color: #1a1f36;
}
th {
  color: #697386;
  white-space: nowrap;
}
td {
  color: #3c4257;
}
.title {
  font-size: 16px;
  font-weight: 900;
  margin-bottom: 4px;
}
.sub {
  font-size: 14px;
  font-weight: 900;
  margin-bottom: 4px;
}
.link {
  &:hover {
    border-bottom: 1px solid $color-anchor-ex;
  }
}
@for $i from 1 through length($color-txt-types) {
  td.txt-type#{$i},
  th.txt-type#{$i} {
    color: nth($color-txt-types, $i);
  }
}
th,
td {
  background-color: #fff;
  padding: 7px;
  box-shadow: inset 0 -1px #e3e8ee;
}
tr.disabled {
  > td {
    @extend %disabled-td;
  }
}
tr {
  transition: .3s all;
}
tr:hover {
  filter: brightness(95%);
}
&.striped {
  tr:nth-child(odd) td {
    background-color: #f7fafc;
  }
  tr.disabled:nth-child(odd) td {
    @extend %disabled-td;
  }
}

}