src/scss/modules/_tables.scss
.table {
    th {
        line-height: 1.2;

        a {
            color: $text-color;

            &:hover {
                text-decoration: underline;
                cursor: pointer;
            }
        }

        &[align="right"] {
            text-align: right;
        }

        &[align="center"] {
            text-align: center;
        }

        &[align="left"] {
            text-align: left;
        }
    }

    td {
        small {
            color: $gray;
            font-weight: 400;
        }

        &.td-strong {
            font-size: 1.1em;
            font-weight: 700;
        }

        &.td-fixed {
            width: 8%;
        }

        &.message.empty {
            font-size: 1.4em;
            color: $gray;
            text-align: center;
            padding: 2em 0;
        }

        word-wrap: break-word;
        overflow-wrap: break-word;
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
    }

    &.table-align-middle {
        td {
            vertical-align: middle;
        }
    }

    &.table-spaced {

        td,
        th {
            padding: 14px 8px;
        }
    }

    &.table-striped {}

    &.table-striped>tbody>tr:nth-of-type(odd) {
        background-color: $gray-hover-light;
    }

    &.table-mobile td span.td-label {
        display: none;
    }

    @media only screen and (max-width: 767px),
    (min-width: 768px) and (max-width: 1024px) {
        &.table-mobile {

            table,
            thead,
            tbody,
            th,
            td,
            tr {
                display: block;
            }

            thead tr {
                position: absolute;
                top: -9999px;
                left: -9999px;
            }

            tr {
                border-bottom: 1px solid #ccc;
            }

            td {
                border: none !important;
                position: relative;
                padding-left: 50% !important;
            }

            .not-thead td {
                padding-left: 5% !important;
            }

            td span.td-label {
                display: block;
                position: absolute;
                top: 6px;
                left: 6px;
                width: 45%;
                padding-right: 10px;
                white-space: nowrap;
                font-weight: 500;
            }

            tr:nth-child(even) {
                background: #fff;
            }

            tr:nth-child(odd) {
                background: #f0f0f0;
            }
        }
    }
}

.table-hover>tbody>tr {
    &:hover {
        background-color: $gray-hover;
    }
}

$color_alto_approx: #ddd;
$color_lochmara_approx: #0072bb;

.table-scroll {
    overflow-x: auto;

    table th {
        white-space: nowrap;
    }
}

@media (max-width: 992px) {
    table.table-responsive-poncho {
        border: 0;
        display: inline-block;
        width: 100%;

        thead {
            border: none;
            clip: rect(0, 0, 0, 0);
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            width: 100%;
            display: inline-block;
        }

        tbody {
            display: inline-block;
            width: 100%;
        }

        tr {
            display: block;
            margin-bottom: 0.625em;
        }

        td {
            border-bottom: 1px solid $color_alto_approx;
            display: block;

            &:last-child {
                border-bottom-color: $color_lochmara_approx;
                border-bottom-width: 3px;
            }

            &:first-child {
                border-top: 0 !important;
            }
        }

        td::before {
            content: attr(data-label);
            //float: left;
            font-weight: 700;
            text-transform: inherit;
            display: block;
        }
    }
}

/* PONCHO TABLES */
#ponchoTable caption {
    display: none;
}

#ponchoTableFiltroCont label:first-letter,
#ponchoTable th:first-letter {
    text-transform: uppercase;
}

#ponchoTable caption {
    display: none;
}