Html 强制表格内的表格填充剩余屏幕高度

我有一张桌子在桌子里面。我想让里面的表格填满屏幕底部的剩余空间。如果表格中的行太多，无法全部显示在屏幕上，我希望表格有一个垂直滚动条。整个页面不应有垂直滚动条

我可以向元素添加ID或类，但是如果可能的话，一般的HTML需要保持不变

不久前，我使用100%的高度和固定的像素值来说明其他元素的额外高度，但我想避免这种情况，这样我就不必担心在将来其他元素的大小发生变化时更改它

html，
身体
桌子
t身体，
tr{
身高：100%；
保证金：0；
}
梅恩赛尔先生{
显示：块；
}
表div：最后一个孩子{
最大高度：250px；
溢出x：隐藏；
溢出y：自动；
}
html，
身体{
背景色：红色；
}
桌子{
背景颜色：蓝色；
}
表td分区：第一个孩子{
背景颜色：绿色；
}
表td分区：最后一个孩子，
餐桌{
背景颜色：黄色；
}

第1列
第2列
一些val#1
一些val#1
一些val#2
一些val#2
一些val#3
一些val#3
一些val#4
一些val#4
一些val#5
一些val#5
一些val#6
一些val#6
一些val#7
一些val#7
一些val#8
一些val#8
一些val#9
一些val#9
有些价值10英镑
有些价值10英镑
一些val#1
一些val#1
一些val#2
一些val#2
一些val#3
一些val#3
一些val#4
一些val#4
一些val#5
一些val#5
一些val#6
一些val#6
一些val#7
一些val#7
一些val#8
一些val#8
一些val#9
一些val#9
有些价值10英镑
有些价值10英镑
一些val#1
一些val#1
一些val#2
一些val#2
一些val#3
一些val#3
一些val#4
一些val#4
一些val#5
一些val#5
一些val#6
一些val#6
一些val#7
一些val#7
一些val#8
一些val#8
一些val#9
一些val#9
有些价值10英镑
有些价值10英镑
一些val#1
一些val#1
一些val#2
一些val#2
一些val#3
一些val#3
一些val#4
一些val#4
一些val#5
一些val#5
一些val#6
一些val#6
一些val#7
一些val#7
一些val#8
一些val#8
一些val#9
一些val#9
有些价值10英镑
有些价值10英镑
使用
vh

<td>
  <div>...</div><!-- First div -->
  <div>...</div><!-- Second div -->
</td>


第1列
第2列
一些val#1
一些val#1
一些val#2
一些val#2
一些val#3
一些val#3
一些val#4
一些val#4
一些val#5
一些val#5
一些val#6
一些val#6
一些val#7
一些val#7
一些val#8
一些val#8
一些val#9
一些val#9
有些价值10英镑
有些价值10英镑
一些val#1