How to override native bootstrap styles via your class?

Question

css

I found similar answers on the Internet, but I can’t completely understand how to redefine all the elements in the structure through my class.
Not using the !important property and not modifying the bootstrap stylesheet itself. By deleting your .stats_table class, all changes should return to the standard ones, prescribed by the framework itself
. I encounter a similar problem everywhere in bootstrap, not only in tables.
I will explain with an example
There is a standard bootstrap table, I want to manage the indents of the table elements (tr td) through my .stats_table class.

<table class="table    stats_table">

                        <tbody>
                        <tr>
                            <td >1 500 <sup>*</sup></td>
                          < <td >рублей вложений</td>
                        </tr>
                        <tr>
                            <td class="header_table">90 000</td>
                            <td class="value_table">постриженных волос</td>
                        </tr>
                        <tr>
                            <td class="header_table">7 200</td>
                            <td class="value_table">секунд времени мастера</td>
                        </tr>
                        <tr>
                            <td class="header_table">500 000 <sup>*</sup></td>
                            <td class="value_table">лайков и комплиментов</td>
                        </tr>
                        </tbody>
                    </table>

.stats_table{
    display:flex;
    flex-grow: 1;
padding:0;
}
.stats_table tbody{
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.stats_table tr{
width:50%;
    display:block;
    padding-left:37px;
    padding-top:32px;
    padding-bottom:31px;
    border: 3px solid red;
}

 .stats_table td{
     display:block;
     width:auto;
     border-top:0;
     padding:25px;
     border-top:3px solid green;
}

Description
My .stats_table class has completely overridden tr - all is well
My .stats_table class does not override td cells in any way (if only through !important) .
From the developer panel I see the following;

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
}
/*------- Перечеркнуто все что касается падингов и бордера*/
.stats_table td {
    display: block;
    width: auto;
    border-top: 0;
    padding: 25px;
    border-top: 3px solid green;
}

Answer 1

create custom.css file, include it AFTER!!! call the bootstrap style file, write in it:

.stats_table {}
.stats_table tr {}
.stats_table td {}
/* ну и так далее */

overwrite indents and other properties in this file. If you disable this file, the styles will revert to default.

Answer 2

Redefine classes in your stylesheet as you would in the original bootstrap, i.e. not just a
i.e. for those bootstrap styles that you want to override using your class, add it in front of the bootstrap class without a space. If you want to completely globally override the bootstrap class, then copy without changes
.table>tbody>tr>td { свои значения здесь }