@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px)  {
    /* Force table to act like they are not */
    table, thead, tbody, th, td, tr { display: block; }

    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr { position: absolute; top: -9999px; left: -9999px; }

    tr { border: 1px solid #ccc; }

    td { min-height: 40px; border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%!important; }

    td:before { content: attr(data-th-title); font-weight: bold; position: absolute; text-align: left; top: 10px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; }
}

@media(min-width: 991px) {
    .table-responsive-lg-c { overflow: auto; }
}

@media (max-width: 480px){
    .table-bordered th,
    .table-bordered td { text-align: end; }
    td { min-height: 45px; }
    td:before { white-space: wrap; }
}