表格标题列与表格列不对齐

Question

我创建了一个带有滚动条的表格，但少数表格标题的宽度与表格不一致。我不确定我做错了什么。在下面发布了代码以及我使用的一些样式。让我知道您是否需要更多信息来帮助我。

HTML

<table tabindex="0" role="region" aria-live="polite" class="summary-container table table-striped table-bordered" style="width: 100%">
      <thead style="display: block">
        <tr>
          <th class="label-header" style="width:5rem"><span class="vertical-center" [innerHTML]="'select'"></span></th>
          <th class="label-header" style="width:10rem"><span class="vertical-center" [innerHTML]="'student_id'"></span></th>
          <th class="label-header" style="width:250rem"><span class="vertical-center" [innerHTML]="'student_name'"></span></th>
          <th class="label-header" style="width:5rem"><span class="vertical-center" [innerHTML]="'gender'"></span></th>
          <th class="label-header" style="width:100rem"><span class="vertical-center" [innerHTML]="'dob'"></span></th>
          <th class="label-header" style="width:100rem"><span class="vertical-center" [innerHTML]="'class_number'"></span></th>
          <th class="label-header" style="width:5rem"><span class="vertical-center" [innerHTML]="'student_type'"></span></th>
          <th class="label-header" style="width:300rem"><span class="vertical-center" [innerHTML]="'mailing_address'"></span></th>
          <th class="label-header" style="width:300rem"><span class="vertical-center" [innerHTML]="'residential_address'"></span></th>
        </tr>
      </thead>    

      <tbody style="display: block;overflow-y: auto;max-height: 300px;width: 100%;">
        <tr *ngFor="let student of students; let i = index">
          <td class="summary-label" style="width:5rem">
            <div class="radio radio-primary radio-inline radio-inline_d" style=" width:auto">
              <input type="radio" name="selectedId{{student.userid}}" id="selectedId{{i}}" (click)="setSelectedId(i, match)">
              <label for="selectedId{{i}}"></label>
            </div>
          </td>
          <td class="summary-label" style="width:10rem">{{match.id}} </td>
          <td class="summary-label" style="width:250rem">{{match.firstName}}{{match.middleName?" "+match.middleName:""}} <b>{{match.lastName}}</b>{{match.suffix?" "+match.suffix:""}} </td>
          <td class="summary-label" style="width:5rem">{{match.gender}}</td>
          <td class="summary-label" style="width:100rem">{{match.dob}} </td>
          <td class="summary-label" style="width:100rem">{{match.class_number}} </td>
          <td class="summary-label" style="width:5rem">{{match.type}} </td>
          <td class="summary-label" style="width:300rem">
            <span>{{match.mailingAddress?.line1?match.mailingAddress.line1+", ":""}} {{match.mailingAddress?.line2?match.mailingAddress.line2:""}} </span> <br/>
            <span>{{match.mailingAddress?.city?match.mailingAddress.city+", ":""}} {{match.mailingAddress?.state?match.mailingAddress.state:""}} {{match.mailingAddress?.zip?" "+match.mailingAddress.zip:""}} </span>
          </td>
          <td class="summary-label" style="width:300rem">
            <span>{{match.residentialAddress?.line1?match.residentialAddress.line1+", ":""}} {{match.residentialAddress?.line2?match.residentialAddress.line2:""}} </span> <br/>
            <span>{{match.residentialAddress?.city?match.residentialAddress.city+", ":""}} {{match.residentialAddress?.state?match.residentialAddress.state:""}} {{match.residentialAddress?.zip?" "+match.residentialAddress.zip:""}} </span>
          </td>
        </tr>
      </tbody>
</table>

CSS

.summary-container
  Box-shadow: 0.1rem 0.3rem 0.2rem 0rem rgba(0, 0, 0, 0.15)
  margin-left: 0.3rem !important
  margin-bottom: 2rem !important

.table
  width: auto
  border: none
  border: 0.1rem solid $gray1
  margin: inherit

 .table-bordered > thead > tr > th 
  font-size: 1.5rem
  font-weight: 500
  border: none
  background: $blue4
  color: #fff
  vertical-align: inherit
  padding: 0.6rem 0.6rem 0.6rem 1.5rem

 .table-bordered > tbody > tr > td 
  padding: 0.6rem 0.6rem 0.6rem 1.5rem
  border: none
  border-right: 0.1rem solid #efefef

.table-striped > tbody > tr:nth-of-type(odd)
  background: #fff
.table-striped > tbody > tr:nth-of-type(even)
  background: #f9f9f9