Как переопределить родные стили bootstrap через свой класс?

Question

[dmitriu256]

Находил подобные ответы в интернете однако доконца не могу понять как переопределить все элементы в структуре через свой класс.
Не используя свойство !important и не модифицировать сам файл стилей бутстрапа. Удаляя свой класс .stats_table все изменения должны вернуться к стандартным, прописанные самим фреймворком
С подобной проблемой встречаюсь повсеместно в бутстрапе, не только в таблицах.
Объясню на примере
Есть стандартная таблица bootstrap я хочу через свой класс .stats_table управлять отступами у элементов таблицы (tr td).

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

Описание
Мой класс .stats_table полностью переопределил tr - все хорошо
Мой класс .stats_table никак (если только через !important) непереопределяет td-ячейки.

Из панели разработчика вижу следующее;

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

Comments

[dmitriu256]

Файлы стилей подключены в следующей (правильной) последовательности

<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet" />
	<link href="css/style.css" type="text/css" rel="stylesheet" />

Answer 1

[Александр Цымбал]

создайте файл custom.css, подключите его ПОСЛЕ!!! вызова файла стилей bootstrap, в него пропишите:

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

перезаписывайте в этом файле отступы и другие свойства. Если отключите этот файл, стили вернутся к стандартным.

Comments

[dmitriu256]

Все в такой последовательности и подключено:

<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet" />
	<link href="css/style.css" type="text/css" rel="stylesheet" />

Answer 2

[Александр Синицын]

Переопределяйте классы в своём файле стилей как в исходном бутстрапа, т.е. не просто
.stats_table td { свои значения здесь }
а

.stats_table.table>tbody>tr>td {  свои значения здесь  }

т.е к тем стилям бутстрапа которые хотите переопределить, используя свой класс, добавляете его впереди к классу бутстрапа без пробела. Если хотите полностью глобально переопределить класс бутстрапа, то копируйте без изменений
.table>tbody>tr>td { свои значения здесь }