Question

我从数据库中提取一些数据并使用ngfor将其显示为表格。有一些风格问题。如何在行中的单元格之间放置空格？

另一个问题是如何水平对齐CRN输入？

<table>
      <tr>
          <td style="font-size: 20px;">CRN</td>
          <td style = "font-size: 20px;" >Name</td>
          <td style ="font-size: 20px;" >Lecturer</td>
          <td style = "font-size: 20px;" >Level</td>
          <td style = "font-size: 20px;" >Days</td>
          <td style = "font-size: 20px;" >Time</td>
      </tr>
      <ng-container *ngFor="let data of courseData">
      <tr>
        <td style="text-decoration: underline;" (click)="crnClicked(data.crn)">{{data.crn}}</td>
        <td>{{data.name}}</td>
        <td>{{data.lecturer}}</td>
        <td>{{data.level}}</td>
        <td>{{data.days}}</td>
        <td>{{data.hours}}</td>

        <button ion-button small  round (click)="addCrn(data.crn)" color="primary" block>+</button>
    </tr>
    </ng-container>
</table>
<div class="row">
    <ion-item>
        <ion-input placeholder="CRN1" type ="number" [(ngModel)]="crn1"></ion-input>
    </ion-item>
    <ion-item>
        <ion-input placeholder="CRN2" type ="number" [(ngModel)]="crn2"></ion-input>
    </ion-item>
    <ion-item>
        <ion-input placeholder="CRN3" type ="number" [(ngModel)]="crn3"></ion-input>
    </ion-item>
    <ion-item>
        <ion-input placeholder="CRN4" type ="number" [(ngModel)]="crn4"></ion-input>
    </ion-item>
    <ion-item>
        <ion-input placeholder="CRN5" type ="number" [(ngModel)]="crn5"></ion-input>
    </ion-item>
</div>

仅显示样式输入：inline-block

Answer 1

对于单元格间距，请使用border-spacing上的CSS <table>属性，如下所示：

<table style="border-spacing: 1rem">...

至于水平对齐CRN，您可以将display: flex添加到row类：

＆＃13;

.row {
  display: flex;
}

＆＃13;

如何设置表格并水平显示输入（也需要样式建议）

1 个答案: