html - 如何设计表格样式并水平显示输入(还需要样式建议)

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

对于单元格间距，使用 CSS border-spacing <table> 上的属性(property)，像这样:

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

关于水平对齐 CRN，您可以添加 display: flex给你的row类:

.row {
  display: flex;
}