Found similar answers on the Internet but until the end I can not understand how to override all the elements in the structure using your class.
Not using the property !important not to modify the style file bootstrap. Removing your class .stats_table all changes have to go back to the standard prescribed by the frameworkA similar problem can be found everywhere in bootstrap, not only in the tables.
Explain with an example
There is a standard table using bootstrap I want your class .stats_table to control the indentation of table elements (tr, td).
1 500
*< .90 000bobbed hair7 200seconds time masters500 000
*likes and compliments
.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 class .completely redefined stats_table tr - all is well
My class .stats_table
no (unless using !important) napriobretenie td-cell.
From the developer dashboard 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; } / * ------- Crossed all that concerns madingou and border*/ .stats_table td { display: block; width: auto; border-top: 0; padding: 25px; border-top: 3px solid green; }