Recently, I made the switch from bootstrap v4 to v5 and I am in the process of identifying and fixing any issues that may have arisen. One particular issue that I am stuck on is the <th> tag not displaying correctly in the table. It seems like my table thead th styles from my custom CSS are being overridden by
table > :not(caption) > * > *tables.scss file in bootstrap.
/* Bootstrap */
.table> :not(caption)>*>* {
padding: 0.5rem 0.5rem;
color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color)));
background-color: var(--bs-table-bg);
border-bottom-width: var(--bs-border-width);
box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
}
/* Custom CSS */
table thead th {
border-right: 1px solid #939393;
background: #666;
background-color: rgb(102, 102, 102);
background-position-x: 0%;
background-position-y: 0%;
background-repeat: repeat;
background-image: none;
color: #fff;
padding: 12px 33px 12px 12px;
text-align: left;
vertical-align: top;
font-weight: bold;
}<table id="table-id" class="table table-striped table-hover" style="width: 100%;">
<thead>
<tr class="row">
<th class="sorting" tabindex="0" aria-controls="table-app-config-list" rowspan="1" colspan="1" style="width: 150px;" aria-label="label here">TITLE HERE</th>