I'm encountering an issue in my Angular project where the table-striped and table-hover classes from Bootstrap are not working, however, other classes like table-primary are functioning properly. Surprisingly, I haven't written any CSS code that might be causing conflicts. I've searched for solutions on Stack Overflow but couldn't find anything that worked. Some suggestions involved including a tbody tag, which also didn't resolve the problem.
<div class="container box" style="margin-top: 10px;">
<table class="table table-striped table-fit table-bordered table-hover">
<thead>
<tr>
<th>Item</th>
<th>Amount</th>
<th>Category</th>
<th>Location</th>
<th>Spent On</th>
</tr>
<tr *ngFor="let entry of expenseEntries">
<th scope="row">{{ entry.item }}</th>
<th>{{ entry.amount }}</th>
<td>{{ entry.category }}</td>
<td>{{ entry.location }}</td>
<td>{{ entry.spendOn | date: 'short' }}</td>
</tr>
</thead>
</table>
</div>