HTML5 Summary/Details with a table

Question

I have a table with some stuff in it for a mobile website (well, assume it's a mobile website - it's actually a Genero app that uses webcomponents but those are just HTML5). Each row shows a summary of the day's activity.

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

and so on.

Next to each row I want to use summary/detail tags to show an itemized list of all the transactions.

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

Or whatever. What I want is before each date to use these tags:

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

The idea is to create a disclosure triangle at the start of each row that shows details.

I've tried making the contents of the "summary" tags be just blank so it'd draw the disclosure triangle and making each row of the table be its own table in the HTML, but that draws the disclosure triangle above the line.

Right now I'm trying to do it with inline-block div tags with class="width-x-pct" and getting them to line up is beyond impossible, especially when it comes to viewing this on multiple mobile devices. If I get it lined up JUST SO for an iPhone 6, it looks wrong on a Galaxy S5.

Any advice would be superb.

Answer 1

I ended up doing this with jQuery and a CSS class with { display: none; }.

First column in the table is an image of a + sign. In jQuery, the icon's click event reveals the non-displayed row (which has a colspan=5 so that it takes up the full width of the table), which has its own embedded table that shows the detail. The + is also swapped out for a - image. When - is tapped, the row hides itself again and the - turns back into a +.

It's still kind of messy, but it works.