如何设置child-table高度以消除与shift-table的间隙？

需要消除child-table与shift-table之间的间隙，实现周一的child-table紧贴shift-table（无空隙），效果参考周二的表格布局。尝试给child-table设置height:100%无效，添加div会破坏原有布局。

CSS代码 #

.parent-table {
  width: 120%;
  table-layout: fixed;
  text-align: center;
  min-height: 200px;
}

.child-table {
  background-color: white;
  border-radius: 8px;
  height: 100%;
}

th,
td {
  width: calc(100% / 4);
}

.shift-table {
  background-color: white;
  border-radius: 8px;
}

HTML代码 #

<table class="clock-card parent-table">
  <tbody>
    <tr> 
      <td style="width: 45px;">
      </td>
      <ng-container *ngFor="let date of dateList; let d = index">
        <td style="vertical-align: top;">
            <table class="hoverable child-table" >
              <tr style="background-color: rgb(248, 248, 248);">
                <th>{{ date | date: 'EE'  }}</th>
              </tr>
              <tr style="background-color: rgb(248, 248, 248);">
                <td>
                  <span *ngIf="date.getDate() == 1">
                    <strong>{{ date | date: 'MMM' }}</strong>
                  </span>
                  <span [ngClass]="isCurrentDate(date) ? 'current-date' : 'cal-dates'">{{ date | date: 'd' }}</span>
                </td>
              </tr>
              <ng-container *ngIf="getSample()?.[dateFormt(date)] as attendance">
                <tr *ngFor="let c of attendance['clock']; let i = index">
                  <th class="Members" id="time" [style.background-color]="i%2 ? 'rgb(250, 209, 209)' : 'rgb(209, 241, 179)'">
                    {{ c.time }}
                  </th>
                </tr>
              </ng-container>           
              <tr>
                <th>
                  <img src="../assets/plus.png" alt="user" class="profile-pic me-2 " width="20" height="20">
                </th>
              </tr>
            </table>
        </td>
      </ng-container>  
    </tr>
    <tr>
      <td>
        <table style="width: 45px;text-align: left;">
          <tr *ngFor="let ls of ['SFT', 'BRK', 'OT', 'TWH'];">
            <td><small><strong>{{ls}}</strong></small></td>
          </tr>
        </table>
      </td>
      <ng-container *ngFor="let date of dateList; let d = index">
        <td id='tmpTD' style="vertical-align: top;">
          <ng-container *ngIf="getSample()?.[dateFormt(date)]?.['shift'] as shift">
              <table class="hoverable shift-table">
                <tr>
                  <td class="Members" style="background-color: rgb(250, 223, 192); display: initial">{{shift}}</td>
                </tr>
                <tr>
                  <td>{{shift}}</td>
                </tr>
              </table>
          </ng-container>
        </td>
      </ng-container>
    </tr>
  </tbody>
</table>

TS函数 #

getSample(){
  return {
    '27/03/2023': {
      'shift': 'Custom', 
      'clock': [{
        'time': '08:02', 
        'shift': 'Standard', 
        'updateAt': {'upBy': 'Gate3', 'upOn': '28/03/2023T08:02'}
      }]
    }, 
    '28/03/2023': {
      'shift': 'Custom',
      'clock': [
        {'time': '08:02', 'shift': 'Standard', 'updateAt': {'upBy': 'Gate3', 'upOn': '28/03/2023T08:02'}}, 
        {'time': '10:47', 'shift': 'Standard', 'updateAt': {'upBy': 'Gate2', 'upOn': '28/03/2023T10:47'}}, 
        {'time': '10:12', 'shift': 'Standard', 'updateAt': {'upBy': 'Gate3', 'upOn': '28/03/2023T10:12'}}
      ]
    }
  }
}

1. 移除无效换行标签：删除child-table内部原有的<br>标签，该标签会强制产生间隙，是问题的核心诱因之一。
2. 清除单元格内边距：给父表格的所有单元格添加padding: 0，消除浏览器默认的单元格内边距：

   .parent-table td {
     padding: 0;
   }
   

3. 消除表格默认外边距：给child-table和shift-table添加margin: 0，移除浏览器自带的表格外边距：

   .child-table, .shift-table {
     margin: 0;
   }
   

4. 统一垂直对齐方式：设置两行单元格的垂直对齐规则，让child-table底部与shift-table顶部完全贴合：

   .parent-table tr:first-child td {
     vertical-align: bottom;
   }
   .parent-table tr:last-child td {
     vertical-align: top;
   }
   

内容的提问来源于stack exchange，提问作者nyla L