Use CSS pseudo elements as inline CSS in email template

I am trying to design email template. In a table, clicking on a row, more info shows up. Here is the fiddle: https://jsfiddle.net/0oyubtaL/

However, the problem is that mobile app of outlook doesnt support and the rows dont expand. I have converted to use inline CSS from using internal CSS - it didnt work. here is the fiddle: https://jsfiddle.net/y2dr7ags/

My question,

1. Is there a way to make the :checked feature of checkbox as inline CSS in the above fiddle and make the expand table row feature work ?

    input[type=checkbox] {
      display: none;
    }

    input[type=checkbox]:checked+table {
      display: table;
      width: calc(100% - 20px);
    }

2. Is there a way to achieve the same effect of collapsible table row using some simple HTML, CSS trick that would work in email templates ?

3. Is there a way to make the whole row of a table an accordion ?

Many thanks.