Question

我正在尝试修复表格的标题。我已经尝试过网络上的所有解决方案。但没有什么对我有用。所以，我的代码就像

<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>

IN css我没有做任何事情，

.report-container{



}

所以，我尝试了不同的解决方案，但我遇到了

的问题

align the header to the table columns

。那么，我该如何解决这个问题呢？任何帮助将不胜感激..

Answer 1

你可以使用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>

Angular js - 修复表格的标题

1 个答案: