HTML5 Summary/Details with a table

Question

我有一个表格，其中包含一些用于移动网站的东西（当然，假设它是一个移动网站 - 它实际上是一个使用webcomponents的Genero应用程序，但那些只是HTML5）。每行显示当天活动的摘要。

Date  Deposits Purchases Balances 
02/16/16  5.00   5.00  0.00 
02/15/16  0.00  15.00  0.00 
02/14/16  20.00   5.00  15.00 

等等。

在每一行旁边，我想使用汇总/明细标签来显示所有交易的分项列表。

Item  Trans Type  Charge  Deposit 
Apple  Charge   0.75   0.00 
Payment  Deposit   0.00   5.00 
Banana  Charge   4.25   0.00 

或其他。我要的是每个日期前使用这些标签：

<details> 
    <summary> 
     (summary table row content) 
    </summary> 
    (detail table) 
</details> 

的想法是在每一个细节显示行开始创建一个三角形。

我试着让“摘要”标签的内容只是空白，所以它会画出三角形并将表格的每一行都作为它自己的HTML表格，但是会在上面绘制显示三角形该线。

现在我试图用class =“width-x-pct”的inline-block div标签来做到这一点，让他们排队是不可能的，特别是在多个移动设备上查看时。如果我把它排列在iPhone 6上，它在Galaxy S5上看起来是错误的。

任何建议将是一流的。

Answer 1

我最终这样做了jQuery和一个CSS类{display：none; }。

表中的第一列是+号的图像。在jQuery中，图标的单击事件显示未显示的行（colspan = 5，因此它占用表的全部宽度），该行具有自己的嵌入表格，以显示详细信息。 +也换成了 - 图像。当 - 被轻敲时，该行再次隐藏，并且 - 变回到+。

这仍然是一种混乱，但它的工作原理。