I've been working on fixing the headers of a table and have tried multiple solutions I found online, but nothing seems to be effective for me. Here's my current code:
<div class="report-container">
<div class="row">
<div class="col-md-12 col-sm-12"
ng-class="updatingReportFieldValue ? 'table-container-disabled cursor-progress' : ''"
ng-show="!loadingReports">
<div class="suggestion">
<table class="table table-striped table-bordered table-header-fixed fixed_headers">
<thead class="text-center text-info">
<tr>
<th class="text-center">Annotation</th>
<th class="text-center">Field</th>
<th class="text-center">Message</th>
<th class="text-center">Score</th>
</tr>
</thead>
<tr ng-repeat="report in reports.data">
<td class="text-center">{{ report.attributes.annotation }}</td>
<td class="td-report-field">{{ report.attributes.field }}</td>
<td>{{ report.attributes.message }}</td>
<td class="text-center">{{ report.attributes.score }}</td>
</tr>
</table>
</div>
As for the css, I haven't made any changes aside from
.report-container{
}
I've tried various solutions, but I'm struggling with aligning the header to the table columns. Any advice or guidance on how to solve this issue would be greatly appreciated.