带有表格的 HTML5 摘要/详细信息

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" 的内联块 div 标签来完成它，并且让它们对齐是不可能的，尤其是在多个移动设备上查看时。如果我把它放在 iPhone 6 上，那么它在 Galaxy S5 上看起来是错误的。

任何建议都会很棒。

Answer 1

我最终使用 jQuery 和带有 { display: none; 的 CSS 类来完成此操作。}。

表中的第一列是 + 号的图像。在 jQuery 中，图标的单击事件会显示未显示的行（该行的 colspan=5，以便它占据表格的整个宽度），该行有自己的嵌入表格来显示详细信息。+ 也被替换为 - 图像。当点击 - 时，该行会再次隐藏自身，并且 - 会变回 +。

它仍然有点混乱，但它有效。