如何使嵌套html表格中的特定列水平滚动？

Question

当有3个或更多货币列时，我想让它水平滚动，如下所示：

目前，我的表格如下所示：

前 6 列是固定的，将占据父表宽度的 80%。剩下的 20% 用于 PDO 货币栏。每个货币列的最小宽度应为父表宽度的 10%。因此，如果只有一种货币 = 20% 宽度，两种货币 = 每种 10% 宽度，三种或更多货币 = 每种 10% 宽度，并且可以水平滚动。

示例：

父表宽度：2445px

货币：[菲律宾比索、美元、澳元]

然后每种货币的列宽为 244px（父表宽度的 10%），并且可以水平滚动。

我正在使用 Angular 14，关于如何实现这一目标有什么建议吗？

更新：根据 @NarenMurali 建议将代码迁移到 stackblitz

我使用嵌套表按 pdoName 对每一行进行分组，然后按倡导，然后按程序进行分组。

Answer 1

我怀疑你能否获得有关堆栈溢出的完整解决方案。
我的第一个建议是使用 colspan/rowspan 来摆脱子表。
然后，您可以在相应的

position: sticky

和

<th>

元素上使用

<td>

，使它们漂浮在其余元素上。