.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; } }
}