Question

我在表格上方有一个过滤器表单组。如何使其与下表的标题对齐？不幸的是，我对CSS / HTML知之甚少，因此很难知道从哪里开始。

我曾经尝试过将表单作为表格的标题，看起来几乎一样，但仍然没有对齐：

我的HTML：

 <div class="container-fluid">

   <h2>All Controls v1</h2>

   <form [formGroup]="filterFormGroup">
     <mat-form-field>
         <input type="text" formControlName="controlID" placeholder="Control ID" matInput="text"
             [matAutocomplete]="controlIDAuto">
         <button mat-button *ngIf="filterFormGroup.value.controlID" matSuffix mat-icon-button aria-label="Clear"
             (click)="clearFormField('controlID')">
             <span class="glyphicon glyphicon-remove"></span>
         </button>
         <mat-autocomplete autoActiveFirstOption #controlIDAuto="matAutocomplete">
             <mat-option *ngFor="let control of controls | fieldFilter : 'controlID' : filterFormGroup.value.controlID"
                 [value]="control.controlID">
                 {{ control.controlID }}
             </mat-option>
         </mat-autocomplete>
     </mat-form-field>


     <mat-form-field class="lg-filter-input-width">
         <input type="text" placeholder="BU" matInput="text" formControlName="business_Unit_Code"
             [matAutocomplete]="businessUnitCodeAuto">
         <button mat-button *ngIf="filterFormGroup.value.business_Unit_Code" matSuffix mat-icon-button aria-label="Clear"
             (click)="clearFormField('business_Unit_Code')">
             <span class="glyphicon glyphicon-remove"></span>
         </button>
         <mat-autocomplete autoActiveFirstOption #businessUnitCodeAuto="matAutocomplete">
             <mat-option
                 *ngFor="let control of uniqueControlBusinessUnitCodes | fieldFilter : 'business_Unit_Code' : filterFormGroup.value.business_Unit_Code"
                 [value]="control.business_Unit_Code">
                 {{ control.business_Unit_Code }}
             </mat-option>
         </mat-autocomplete>
     </mat-form-field>



     <mat-form-field class="lg-filter-input-width">
         <input type="text" placeholder="Control Objective Area" matInput="text" formControlName="control_Objective_Area"
             [matAutocomplete]="controlObjectiveAreaAuto">
         <button mat-button *ngIf="filterFormGroup.value.control_Objective_Area" matSuffix mat-icon-button
             aria-label="Clear" (click)="clearFormField('control_Objective_Area')">
             <span class="glyphicon glyphicon-remove"></span>
         </button>
         <mat-autocomplete autoActiveFirstOption #controlObjectiveAreaAuto="matAutocomplete">
             <mat-option
                 *ngFor="let control of uniqueControlObjectiveAreas | fieldFilter : 'control_Objective_Area' : filterFormGroup.value.control_Objective_Area"
                 [value]="control.control_Objective_Area">
                 {{ control.control_Objective_Area }}
             </mat-option>
         </mat-autocomplete>
     </mat-form-field>
     <mat-form-field class="lg-filter-input-width">
         <input type="text" placeholder="Control Owner" matInput="text" formControlName="control_Owner"
             [matAutocomplete]="controlOwnerAuto">
         <button mat-button *ngIf="filterFormGroup.value.control_Owner" matSuffix mat-icon-button aria-label="Clear"
             (click)="clearFormField('control_Owner')">
             <span class="glyphicon glyphicon-remove"></span>
         </button>
         <mat-autocomplete autoActiveFirstOption #controlOwnerAuto="matAutocomplete">
             <mat-option
                 *ngFor="let control of uniqueControlOwners | fieldFilter : 'control_Owner' : filterFormGroup.value.control_Owner"
                 [value]="control.control_Owner">
                 {{ control.control_Owner }}
             </mat-option>
         </mat-autocomplete>
     </mat-form-field>
     <mat-form-field class="lg-filter-input-width">
         <input type="text" placeholder="Control Coordinator" matInput="text" formControlName="control_Coordinator"
             [matAutocomplete]="controlCoordinatorAuto">
         <button mat-button *ngIf="filterFormGroup.value.control_Coordinator" matSuffix mat-icon-button
             aria-label="Clear" (click)="clearFormField('control_Coordinator')">
             <span class="glyphicon glyphicon-remove"></span>
         </button>
         <mat-autocomplete autoActiveFirstOption #controlCoordinatorAuto="matAutocomplete">
             <mat-option
                 *ngFor="let control of uniqueControlCoordinators | fieldFilter : 'control_Coordinator' : filterFormGroup.value.control_Coordinator"
                 [value]="control.control_Coordinator">
                 {{ control.control_Coordinator }}
             </mat-option>
         </mat-autocomplete>
     </mat-form-field>
     <mat-form-field class="lg-filter-input-width">
         <input type="text" placeholder="Audit Programs" matInput="text" formControlName="audit_Programs"
             [matAutocomplete]="auditProgramsAuto">
         <button mat-button *ngIf="filterFormGroup.value.audit_Programs" matSuffix mat-icon-button aria-label="Clear"
             (click)="clearFormField('audit_Programs')">
             <span class="glyphicon glyphicon-remove"></span>
         </button>
         <mat-autocomplete autoActiveFirstOption #auditProgramsAuto="matAutocomplete">
             <mat-option
                 *ngFor="let control of uniqueAuditPrograms | fieldFilter : 'audit_Programs' : filterFormGroup.value.audit_Programs"
                 [value]="control.audit_Programs">
                 {{ control.audit_Programs }}
             </mat-option>
         </mat-autocomplete>
     </mat-form-field>
     <mat-form-field>
         <mat-select formControlName="status" placeholder="Status">
             <mat-option *ngFor="let status of ['All', 'Pass', 'Fail', 'Warn', 'AFail']" [value]="status">
                 {{ status }}
             </mat-option>
         </mat-select>
     </mat-form-field>
     <button *ngIf="saveFilterSupport" class="btn btn-primary margin-md-left" (click)="saveFilter()">Save
         Filters</button>
 </form>
 <table class="table table-striped" matSort (matSortChange)="sortData($event)"> 
     <thead>
       <tr>
         <th mat-sort-header="controlID">Control ID</th>
         <th mat-sort-header="business_Unit_Code">BU</th>
         <th>Control Activity</th>

         <th mat-sort-header="control_Objective_Area">Control Objective Area</th>

         <th mat-sort-header="control_Owner">Control Owner</th>
         <th mat-sort-header="control_Coordinator">Control Coordinator</th>
         <th mat-sort-header="audit_Programs">Audit Programs</th>
         <th mat-sort-header="status">Status</th>
       </tr>
     </thead>
     <tbody>
         <tr *ngFor="let control of controls 
                     | fieldFilter : 'controlID' : filterFormGroup.value.controlID
                     | fieldFilter : 'business_Unit_Code' : filterFormGroup.value.business_Unit_Code
                     | statusFilter : filterFormGroup.value.status 
                     | fieldFilter: 'control_Coordinator' : filterFormGroup.value.control_Coordinator
                     | fieldFilter : 'audit_Programs' : filterFormGroup.value.audit_Programs
                     | fieldFilter : 'control_Owner' : filterFormGroup.value.control_Owner
                     | fieldFilter : 'control_Objective_Area': filterFormGroup.value.control_Objective_Area
                     let i=index">
             <td> 
                 <a [routerLink]="['/control/', control.controlID.trim()]">  
                        {{control.controlID}}   
                 </a>
             </td>
             <td [class.strike]="control.status =='UNDEFINED'">{{control.business_Unit_Code }}</td> 
             <td class="visibleItem" *ngIf="i != visibleItem" (click)="showMore(i)"
                 [class.strike]="control.status =='UNDEFINED'">
                 {{(control.control_Activity.length > 100) ? (control.control_Activity | slice:0:100) + 
                          '...' :  control.control_Activity}}
                 <a class="showText" (click)="showMore(i)">More</a>
             </td>
                 <td class="visibleItem" *ngIf="i == visibleItem" (click)="showLess()"
                     [class.strike]="control.status =='UNDEFINED'">
                     {{control.control_Activity}}
                     <a class="showText" (click)="showLess()">Less</a>
                 </td>
             <td [class.strike]="control.status =='UNDEFINED'">{{control.control_Objective_Area }}</td> 
             <td [class.strike]="control.status =='UNDEFINED'"><a *ngFor="let owner of control.control_Owner.split(';'); let isLast=last" target="_blank" href="http://fidelitycentral.fmr.com/ww/{{(owner |  slice:-8:-1)}}">{{owner}}<span *ngIf="!isLast"><br></span></a></td>
             <!-- <td [class.strike]="control.status =='UNDEFINED'"> {{control.control_Executor}}</td> -->
             <td [class.strike]="control.status =='UNDEFINED'"><a *ngFor="let coordinator of control.control_Coordinator.split(';'); let isLast=last" target="_blank" href="http://fidelitycentral.fmr.com/ww/{{(coordinator |  slice:-8:-1)}}">{{coordinator}}<span *ngIf="!isLast"><br></span></a></td>
             <td [class.strike]="control.status =='UNDEFINED'"> {{control.audit_Programs}}</td>
             <td [hidden]="control.status !='FAIL'" ><span class="label label-danger"> {{control.status}} <span class="glyphicon glyphicon-remove"></span> </span></td>
             <td [hidden]="control.status !='PASS'" ><span class="label label-success"> {{control.status}} <span class="glyphicon glyphicon-ok"></span> </span></td>
             <td [hidden]="control.status !='WARN'" ><span class="label label-warning"> {{control.status}}  <span class="glyphicon glyphicon-warning-sign"></span> </span></td>
             <td [hidden]="control.status !='AFAIL'" ><span class="label label-primary"> {{control.status}} <span class="glyphicon glyphicon-asterisk"></span> </span></td>
             <td [hidden]="control.status !='UNDEFINED'" ><span class="label label-default"> {{control.status}}  <span class="glyphicon glyphicon-asterisk"></span> </span></td>
             <td [hidden]="control.status !='NO AUTO'" ><span class="label label-default"> {{control.status}}  <span class="glyphicon glyphicon-asterisk"></span> </span></td>

         </tr>

     </tbody>
   </table>

 </div>

尝试将过滤器组与表格对齐

0 个答案: