Question

我有一个父窗体，其中有一个两列的表，表中有一个子窗体/子表，也有两列。在我的子窗体/表中，这两列都被挤压成与父表的第一列对齐。如何使第一子列与第一父列对齐，第二子列与第二父列对齐？

我创建了特殊的类并确保统一的格式，确保对父元素<table>和子元素<th>和<td>都应用相同的类。

父模板

<form #myForm="ngForm" style="margin-left: 2%; margin-right: 2%" [formGroup]="form">
  <h3>Form</h3>
  <table class="main-table">
    <tr>
      <th class="category-header; enroll">Category</th>
      <th class="input-header; enroll">Input</th>
    </tr>
    <tr *ngFor="let key of memberKeys">
      <ng-container *ngIf="topLevel(key); else subTable">
        <td class="enroll">{{key}}:&nbsp;</td>
        <td class="enroll"><input type="text" name="{{key}}" placeholder="Enter {{key}} Here" formControlName="{{key}}"/></td>
      </ng-container>
      <ng-template #subTable>
        <app-sub-enroll-form [objEnroll]="member[key]" [formGroup]="form" [form]="form"></app-sub-enroll-form> 
      </ng-template>
    </tr>
  </table>
  <button type="submit">Submit</button>
</form>

子模板（选择器：“ app-sub-enroll-form”）

<form [formGroup]="form">
  <table class="main-table">
    <tr>
        <th class="category-header; enroll">&nbsp;</th>
        <th class="input-header; enroll">&nbsp;</th>
    </tr>
    <tr *ngFor="let subkey of allKeys">
      <td class="enroll">{{subkey}}:&nbsp;</td>
      <td class="enroll"><input type="text" name="{{subkey}}" placeholder="Enter {{subkey}} Here" formControlName="{{subkey}}"/></td>
    </tr>
  </table>
<form>

CSS

 table.main-table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 30%; 
    border:blue
  }

  td.enroll, th.enroll {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
    width: 15%;
  }

  .category-header {
    width: 15%;
  }

  .input-header {
    width: 15%;
  }

我希望每个子列都与相应的父列对齐，但是将两个子列都挤压在一起，以使两个子列与第一个父列对齐。非常感谢您的任何建议。

如何在子表/表单中与父表对齐

0 个答案: