Css 如何在表中具有特定数量的行

我有一张桌子，里面有一张名单。我使用*ngfor填充了表

<tbody>
   <tr *ngFor="let person of people (click)="addThisPersonToArray(person)" [class.active]="isPersonSelected(person)">
        <td>{{person.id}}</td>
        <td>{{person.firstName}}</td>
       <td>{{person.lastName}}</td>
    </tr>

这是你的期望

@Component({
  selector: 'my-app',
  template: `
  <div>
    <table class="table1"> 
    <tr *ngFor="let person of people" (click)="addThisPersonToArray(person)">
      <td>{{person.first_name}}</td>
    </tr>

    </table>
    <div style="max-height:100px;overflow:scroll"> 
    <table class="second-case">
    <tr *ngFor="let person of second" (click)="addThisPersonToArray(person)">
      <td>{{person.first_name}}</td>
    </tr>
    </table>
    </div>
  </div>
  `,
})
export class App {
  name:string;
  people:any[]=[{"first_name":"Sara"},{"first_name":"Harry"},{"first_name":"Eugene"},{"first_name":"Julia"},{"first_name":"Barbara"}];
  second:any[]=[{"first_name":"Frank"},{"first_name":"Harry"},{"first_name":"Joshua"},{"first_name":"Julia"},{"first_name":"Louis"},{"first_name":"Patrick"},{"first_name":"Paul"},{"first_name":"Joyce"},{"first_name":"Brenda"},{"first_name":"Joshua"},{"first_name":"Jerry"},{"first_name":"Janet"},{"first_name":"Nicholas"},{"first_name":"Janet"},{"first_name":"Julia"}];
  constructor() {
    if(this.people.length<10){
      let temp = {"first_name": ""};
      for(let i=this.people.length; i<10; i++ ){
        let temp = {"first_name": ""};
        this.people.push(temp);
      }
  }
  }
}

如果你需要任何解释，请告诉我

是否有某种原因导致仅仅将桌子的高度设置为足以容纳十行的高度，以及
溢出-x:scroll
？我看不出这和Angular有什么关系。@torazaburo实际上我有两个表，其中数据可以从一个表传输到另一个表。我希望这两个表具有相同的高度/行数，而不管两个表中有多少数据。我刚刚将可见行数设置为10。谢谢您的帮助。现在我可以设置空白行，但是每次我把数据传送到另一个表时，数据被推到表的末尾。空白行位于顶部，而推送数据位于末尾。
tr td{
  border : 1px solid blue;
}
.table1 tr td{
  height :20px;
}

.second-case {
  height:80px;
  overflow-y:scroll;
}