Angular 2 + Bootstrap 4 - 如何将表格高度放入一行？

Question

我正在开发一个膳食计划应用程序，允许用户获取食谱/下订单。 在应用程序的其中一行中，我显示了 3 个选项卡，如下所示。

meal_planner_layout

代码：https://stackblitz.com/edit/angular-bootstrap-4-starter-ycgcru?file=src/app/app.component.html

订单信息由用户提供。从后端检索运费和税金 - 使用 setTimeout 进行模拟。

关键要求：该行必须占查看高度的 40%。这是使用自定义 css 类设置的 - 行固定高度。 该表最多有 1 个标题 + 5 行。整个表格必须适合该行。

中断的地方： 导航选项卡显示不正确 - 不过这适用于我的系统。

表格超出了行高。因此，下一行中的按钮与表格的内容重叠。我尝试设置 h-100 但它不起作用。

Answer 1

这可能与表格的 HTML 结构有关。最完美的是... >tbody > tr > td，但你的是 > tbody > div > app-tax > tr > td。这些可能会使您的表格以奇怪的方式呈现。

我相信您至少可以通过在 app-tax 宿主元素上移动 *ngFor 来摆脱额外的 div 元素。

您可以对普通表结构进行硬编码，以查看删除这些是否可以修复表的行为。