我正在尝试修复表格的标题。我已经从网上尝试了所有解决方案。但是，没有什么对我有用。所以，我的代码就像
<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>
在CSS中，我不做任何事情，
.report-container{
}
所以，我尝试了不同的解决方案，但是我面临的问题是
align the header to the table columns
.So，我该如何解决这个问题？任何帮助将不胜感激 ..
最佳答案
您可以使用flex。它超级简单。
这是一个例子。您需要更改的只是ng-repeat而不是硬编码的td值。
table {
display: flex;
flex-direction: column;
}
tr {
display: flex;
}
tbody {
overflow-y: scroll;
height: 200px;
}
th,
td {
flex: 1;
border: 1px dotted black;
text-align: center;
}
tr:nth-child(2n+1)>td {
background-color: #dcdcdc;
}
thead th {
color: white;
background-color: #454545;
}<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>
<tbody>
<tr>
<td>Annotation
</td>
<td>Field
</td>
<td>Message
</td>
<td>1
</td>
</tr>
<tr>
<td>Annotation
</td>
<td>Field
</td>
<td>Message
</td>
<td>1
</td>
</tr>
<tr>
<td>Annotation
</td>
<td>Field
</td>
<td>Message
</td>
<td>1
</td>
</tr>
<tr>
<td>Annotation
</td>
<td>Field
</td>
<td>Message
</td>
<td>1
</td>
</tr>
<tr>
<td>Annotation
</td>
<td>Field
</td>
<td>Message
</td>
<td>1
</td>
</tr>
<tr>
<td>Annotation
</td>
<td>Field
</td>
<td>Message
</td>
<td>1
</td>
</tr>
<tr>
<td>Annotation
</td>
<td>Field
</td>
<td>Message
</td>
<td>1
</td>
</tr>
<tr>
<td>Annotation
</td>
<td>Field
</td>
<td>Message
</td>
<td>1
</td>
</tr>
<tr>
<td>Annotation
</td>
<td>Field
</td>
<td>Message
</td>
<td>1
</td>
</tr>
<tr>
<td>Annotation
</td>
<td>Field
</td>
<td>Message
</td>
<td>1
</td>
</tr>
<tr>
<td>Annotation
</td>
<td>Field
</td>
<td>Message
</td>
<td>1
</td>
</tr>
<tr>
<td>Annotation
</td>
<td>Field
</td>
<td>Message
</td>
<td>1
</td>
</tr>
<tr>
<td>Annotation
</td>
<td>Field
</td>
<td>Message
</td>
<td>1
</td>
</tr>
<tr>
<td>Annotation
</td>
<td>Field
</td>
<td>Message
</td>
<td>1
</td>
</tr>
<tr>
<td>Annotation
</td>
<td>Field
</td>
<td>Message
</td>
<td>1
</td>
</tr>
<tr>
<td>Annotation
</td>
<td>Field
</td>
<td>Message
</td>
<td>1
</td>
</tr>
<tr>
<td>Annotation
</td>
<td>Field
</td>
<td>Message
</td>
<td>1
</td>
</tr>
</tbody>
</table>您需要根据需要调整弹性值。修改了代码段以使其具有不同的列宽。
table {
display: flex;
flex-direction: column;
}
tr {
display: flex;
flex-wrap: nowrap;
}
tbody {
overflow-y: scroll;
height: 200px;
}
th,
td {
border: 1px solid black;
text-align: center;
}
.report-annotation {
flex: 1;
}
.report-field {
flex: 0.5;
}
.report-message {
flex: 2;
}
.report-score {
flex: 0.4;
}
tr:nth-child(2n+1)>td {
background-color: #dcdcdc;
}
thead th {
color: white;
background-color: #454545;
}<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 report-annotation">Annotation</th>
<th class="report-field">Field</th>
<th class="text-center report-message">Message</th>
<th class="text-center report-score">Score</th>
<tr>
</thead>
<tbody>
<tr>
<td class="report-annotation">Annotation
</td>
<td class=" report-field">Field
</td>
<td class=" report-message">Message
</td>
<td class="report-score">1
</td>
</tr>
<tr ng-repeat="report in reports.data">
<td class="text-center report-annotation">{{annotation }}</td>
<td class="report-field">{{field }}</td>
<td class="report-message">{{message }}</td>
<td class="text-center report-score">{{ score }}</td>
</tr>
</tbody>
</table>关于javascript - Angular JS-修复表头，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40543262/