Адаптив таблицы

html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

*, *::after, *::before {
    -webkit-box-sizing: inherit;
    box-sizing: inherit
}

.ta-addBalance__table {
    margin-bottom: 24px;
    width: 100%;
    height: 156px;
    overflow: hidden;
    border-collapse: collapse;
    border-radius: 5px
}

@media only screen and (max-width: 768px) {
    .ta-addBalance__table-th {
        display: none
    }
}

@media only screen and (max-width: 768px) {
    .ta-addBalance__table tbody tr {
        display: block;
        width: 100%
    }
}

.ta-addBalance__table tbody tr:nth-child(odd) {
    background-color: #f5f5f5
}

.ta-addBalance__table tbody tr:nth-child(even) {
    background-color: #fff
}

.ta-addBalance__table thead {
    background-color: #f5f5f5
}

@media only screen and (max-width: 576px) {
    .ta-addBalance__table thead {
        margin-bottom: 11px;
        font-size: 14px
    }
}

.ta-addBalance__table thead th:not(:first-child) {
    padding: 8px;
    max-width: 100%;
    font-weight: 400;
    font-size: 14px;
    line-height: 130%;
    text-align: center;
    color: #181818
}

.ta-addBalance__table th {
    padding: 8px 0 8px 16px;
    max-width: 189px;
    font-weight: 600;
    font-size: 16px;
    text-align: left;
    color: #76767a
}

.ta-addBalance__table th span {
    color: #284714
}

.ta-addBalance__table tr {
    font-size: 14px;
    line-height: 130%;
    text-align: center;
    color: #181818
}

@media only screen and (max-width: 768px) {
    .ta-addBalance__table tr {
        margin-bottom: 15px;
        border-radius: 5px
    }
}

@media only screen and (max-width: 768px) {
    .ta-addBalance__table .active {
        -webkit-box-shadow: 0 2px 8px rgba(34, 34, 34, .08);
        box-shadow: 0 2px 8px rgba(34, 34, 34, .08);
        background: #fffce7
    }
}

.ta-addBalance__table-td {
    position: relative
}

@media only screen and (max-width: 768px) {
    .ta-addBalance__table-td {
        display: block;
        width: 100%
    }
}

@media only screen and (max-width: 768px) {
    .ta-addBalance__table-td {
        padding-right: 21px;
        font-size: 14px;
        text-align: right
    }
}

@media only screen and (max-width: 768px) {
    .ta-addBalance__table-td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        padding-left: 8px;
        width: 70%;
        font-weight: 600;
        font-size: 14px;
        text-align: left;
        color: #76767a
    }
}

<table class='ta-addBalance__table'>
    <tbody>
    <tr>
        <td class='ta-addBalance__table-th'>Количество <span>часов</span></td>
        <td class='ta-addBalance__table-td' data-label='Количество часов'>1-99</td>
        <td class='ta-addBalance__table-td' data-label='Количество часов'>100-199</td>
        <td class='ta-addBalance__table-td' data-label='Количество часов'>200-399</td>
    </tr>

    <tr class='active'>
        <td class='ta-addBalance__table-th'><span>Стоимость</span> одного <span>часа</span></td>
        <td class='ta-addBalance__table-td' data-label='Стоимость одного часа'>32 руб.</td>
        <td class='ta-addBalance__table-td' data-label='Стоимость одного часа'>16 руб.</td>
        <td class='ta-addBalance__table-td' data-label='Стоимость одного часа'>15 руб.</td>
    </tr>
    <tr>
        <td class='ta-addBalance__table-th'>Ваша <span>скидка 40%</span></td>
        <td class='ta-addBalance__table-td' data-label='Ваша скидка 100%'>12,8 руб.</td>
        <td class='ta-addBalance__table-td' data-label='Ваша скидка 100%'>6,4 руб.</td>
        <td class='ta-addBalance__table-td' data-label='Ваша скидка 100%'>6 руб.</td>
    </tr>
    <tr>
        <td class='ta-addBalance__table-th'><span>К оплате за час</span></td>
        <td class='ta-addBalance__table-td' data-label='К оплате за час'>19,2 руб.</td>
        <td class='ta-addBalance__table-td' data-label='К оплате за час'>9,6 руб.</td>
        <td class='ta-addBalance__table-td' data-label='К оплате за час'>9 руб.</td>
    </tr>
    </tbody>
</table>