html - 如何对齐数据表的表头

Question

我正在尝试将表头与列对齐；标题项目应移到右侧以与列对齐。

截屏：

Stackblitz - 不起作用，但您可以看到整个代码： https ://stackblitz.com/edit/angular-css24?file=src%2Fapp%2Fnano-table%2Fnano-table.component.html

表格的 HTML 部分：

<div *ngIf="tableList.length > 0"
 class="nano-table-grid nano-mt-5" >

<div class="nano-f-r">
    <input type="text" [(ngModel)]="searchWord" class="nano-white-smoke-input" placeholder="Search"/>
    <button *ngIf="hasExport === true && isExportInProgress === false"
            type="button"
            class="nano-f-250 nano-white-smoke-button nano-ml-2"
            (click)="exportReport()">
        <span>
            CSV
        </span>
    </button>
    <nano-loading-indicator *ngIf="isExportInProgress === true"
                            class="nano-loading-bar-small nano-loading-bar-overlay nano-f-250 "
                            style="margin-left: 2px"></nano-loading-indicator>
</div>

<!-- HERE IS HEADER -->
<div class="nano-table-row nano-table-grid-header"> 
    <div class="{{column.columnClass}}"
         *ngFor="let column of columnsArray"
         [ngClass]="{'sort-active':sortField === column.columnField}"
         (click)="onSortFieldChange(column.columnField)">
        <span>
            {{column.columnName}}
        </span>
        <i class="fa"
           [class.fa-sort-asc]="sortInverse === true && sortField === column.columnField"
           [class.fa-sort-desc]="sortInverse === false && sortField === column.columnField">
        </i>
    </div>
</div>

<div class="nano-f-c nano-table-row-wrapper"
     *ngFor="let item of getFilteredList()">
    <div class="nano-table-row">
        <ng-template [ngTemplateOutlet]="template"
                     [ngOutletContext]="{item: item}">
        </ng-template>
    </div>
</div>

<nano-table-footer [pageNumber]="pageNumber"
                   [pageCount]="pageCount"
                   [pageCountOptions]="pageCountOptions"
                   [length]="getLengthForFooter()"
                   (onPageNumberChange)="onPageNumberChange($event)"
                   (onPageCountChange)="onPageCountChange($event)">
</nano-table-footer>

表格的CSS代码：

  @import "../base/colors";

.nano-table-grid {
  //flex: 1;
  .nano-table-grid-header {
    > div {
      border-bottom: 1px solid $nano-dark-grey;
      //padding: 0 5px;
      cursor: pointer;
      font-family: inherit !important;
      i {
        margin: auto 0 auto 2px;
      }
      &.sort-active {
        background-color: rgba(141, 192, 219, .25);
      }
    }
  }
  .nano-table-row-wrapper {
    border-bottom: 1px solid #e0e0e0;
  }
  .nano-table-row {
    display: flex;
    padding: 5px 0;
    flex-wrap: wrap;
    border: 1px solid transparent;
    > div {
      flex: 1;
      display: flex; 
      overflow: hidden;
      margin: 0 2px;
      > span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .nano-table-placement-name-cell {
      flex: 3;
      flex-direction: column;
      span {
        margin: auto auto auto 0;
        max-width: 100%;
        &:nth-child(2) {
          //font-weight: bold;
        }
      }
      .tooltip-inner {
        max-width: inherit;
      }
    }
    .nano-table-entity-name-cell {
      flex: 2;
      flex-direction: column;
      span {
        margin: auto auto auto 0;
        max-width: 100%;
        &:nth-child(2) {
          //font-weight: bold;
        }
      }
      .tooltip-inner {
        max-width: inherit;
      }
    }
    .nano-table-name-cell {
      font-family: monospace;
      flex: 2;
      span {
        margin: auto 0;
      }
    }
    .nano-table-text-cell {
      font-family: monospace;
      flex: 2;
      span {
        margin: auto 0;
      }
    }
    .nano-table-placement-name-cell {
      min-width: 270px;
      span {
        margin: auto 0;
      }
    }
    .nano-table-number-cell {
      font-family: monospace;
      span {
        margin: auto 5px auto auto;
      }
    }
    .nano-table-actions-cell {
      min-width: 90px;
      flex: 2;
      justify-content: center;
      > span {
        padding: 5px;
      }
    }
    .nano-table-shrink-cell {
      flex: 0 0 50px;
      justify-content: center;
      align-items: center;
    }
    .nano-table-expanded-cell {
      flex: 3;
    }
    .nano-table-preview-cell {
      height: 500px;
      flex: 0 0 100%;
      margin-top: 7px;
      margin-bottom: -5px;
      flex-direction: column-reverse;
      position: relative;
      .nano-entity-comment {
        height: calc(100% - 50px);
      }
      .nano-entity-header {
        display: none;
      }
    }
    &.opened {
      border: 1px solid $nano-white-smoke-darken;
    }
    &:nth-child(even) {
      background-color: #fdfdfd;
    }
  }
}

标签： htmlcss