角材料Datepicker宽度问题

时间:2020-05-31 12:13:44

标签: html css angular

我的Angular Material Datepicker有问题。我将其放置在网站上的单元格间距为0的表中。我的问题是,除了Datepicker之外,每个输入字段都很好且长度相等,但Datepicker比其他任何输入字段都长一点。有人知道为什么以及如何解决吗?我从网站添加了HTML和CSS!

enter image description here

.full-width {
  width: 100%;
}

mat-label, input, mat-checkbox {
  font-size: 16px;
}
<mat-card class="example-card">
    <h2>Persönliche Daten:</h2>
    <form [formGroup]="this.formService.anmeldung">
      <div *ngIf="!deviceXs">
        <table cellspacing="0" class="full-width">
          <tr>
            <td>
              <mat-form-field class="full-width">
                <mat-label>Vorname</mat-label>
                <input formControlName="vorname" matInput>
              </mat-form-field>
            </td>
            <td>
              <mat-form-field class="full-width">
                <mat-label>Nachname</mat-label>
                <input formControlName="nachname" matInput>
              </mat-form-field>
            </td>
          </tr>
        </table>
        <table cellspacing="0" class="full-width">
          <tr>
            <td>
              <mat-form-field class="full-width">
                <mat-label>Geburtstag</mat-label>
                <input matInput [matDatepicker]="picker" formControlName="geburtstag">
                <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                <mat-datepicker startView="multi-year" #picker></mat-datepicker>
              </mat-form-field>
            </td>
            <td>
              <mat-form-field class="full-width">
                <mat-label>Geburtsort</mat-label>
                <input formControlName="geburtsort" matInput>
              </mat-form-field>
            </td>
          </tr>
        </table>
        <table cellspacing="0" class="full-width">
          <tr>
            <td>
              <mat-form-field class="full-width">
                <mat-label>Straße</mat-label>
                <input formControlName="strasse" matInput>
              </mat-form-field>
            </td>
            <td>
              <mat-form-field class="full-width">
                <mat-label>Hausnummer</mat-label>
                <input formControlName="hausNr" matInput>
              </mat-form-field>
            </td>
          </tr>
        </table>
        <table cellspacing="0" class="full-width">
          <tr>
            <td>
              <mat-form-field class="full-width">
                <mat-label>PLZ</mat-label>
                <input formControlName="plz" matInput>
              </mat-form-field>
            </td>
            <td>
              <mat-form-field class="full-width">
                <mat-label>Ort</mat-label>
                <input formControlName="ort" matInput>
              </mat-form-field>
            </td>
          </tr>
        </table>
      </div>

0 个答案:

没有答案