I am struggling to make my CSS styles take precedence over Bootstrap's defaults for aligning table headers. Below is the code for my table:
<table class="userProjectsTable" id="userLeadProjectsTable">
<tr class="userProjectsHeaderRow" id="userLeadTableHeaderRow">
<th>Project Title</th>
<th>Created Date</th>
<th>Currently Active</th>
<th>Go to Project Workspace</th>
</tr>
<tr> ...remaining rows... </tr>
</table>
Additionally, I have included some of the CSS code that I am using to style it:
.userProjectsTable {
text-align: center;
width: 95%;
border-radius: 7px;
}
#userLeadTableHeaderRow {
background-color: rgba(6, 47, 55, .9);
text-transform: uppercase;
text-align: center;
font-size: 1.1em;
border: 3px solid white;
border-radius: 7px;
height: 20px;
}
However, upon inspection, it appears that the alignment is still being dictated by Bootstrap's table.less CSS file. The conflicting style rule within Bootstrap is as follows:
th {
text-align: left;
}
I find it puzzling that a basic element selector with a specificity score of 1 is overriding both a class and an ID selector. Can you explain how this is happening?