html - 具有共享父列的分层行的语义设计数据表

Question

不好意思标题尴尬。。。。

我如何将以下数组显示为一个 html 表，该表在语义上（接下来我会在视觉上担心）表示项目都是相同的数据类型，而某些成员/行是其他行的子级？

{Items:
      baseball bat : {
             price: 10
             discount: .20
             tax     : .08
       }
      chocolate cake : {
             price: 25
             discount: .10
             tax     : .05
       }
      robot parts : {
    head : {
        price: 100
        discount: .30
        tax     : .15
    }
    body : {
        price: 150
        discount: .25
        tax     : .125
    }
       }
      mustache wax : {
             price: 11
             discount: 0
             tax     : .5
       }
}

理想情况下，这可以用 html 表表示，以便解析器可以生成上述数组，并且 js 库可以轻松地根据子级填充父级的列。如果嵌套是准无限的，那也是理想的。

这感觉像是 和 属性的一个很好的用headers例scope以及rowgroupsitem 属于整个列表以及它的父级，但我不确定是否仅使用范围来表示。

并且任何关于 js/css 框架（如 bootstrap）的提示，它实际上会正确解析这样的表并使它看起来很棒，也欢迎。但首先要进行适当的数据建模！