表格

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>

我们的想法是在显示详细信息的每一行的开头创建一个显示三角形。

我已尝试制作＆＃34;摘要＆＃34;的内容。标签只是空白，因此它绘制了显示三角形并使表格中的每一行都成为HTML中自己的表格，但是在行上方绘制了显示三角形。

现在我尝试使用带有class =＆＃34; width-x-pct＆＃34;的内联块div标签。让它们排队是不可能的，尤其是在多个移动设备上观看时。如果我把它排成一行只能用于iPhone 6，那么它在Galaxy S5上看起来是错误的。

任何建议都很棒。

Answer 1

我最后用jQuery和一个带有{display：none;的CSS类来做这个。 }。

表格中的第一列是+符号的图像。在jQuery中，图标的click事件显示了未显示的行（其中colspan = 5，因此它占据了表的整个宽度），该行具有自己的嵌入式表格，用于显示详细信息。 +也被替换为 - 图像。当 - 被点击时，该行再次隐藏自身，然后 - 转回+。

它仍然有点凌乱，但它确实有效。