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

Question

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

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

TABLE

<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>

只有样式输入是 display:inline-block

Answer 1

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

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

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

.row {
  display: flex;
}