语义设计的数据表，分层行共享父列

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属性以及rowgroups，这感觉就像一个很好的用例，但我想确定数据表中没有某些方面模型我缺少或误解，因为看起来子项的价格属于整个列表以及它的父级，但我不确定只使用范围来表达。

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