Q:

XML table columns vertically stacked within rows

Got the following problem regarding stacked displaying of some XML data (tables) rows. They (XML data) are designed as a table (like one is supposed to display it as a HTML table). Most usual showed way is in the form of HTML table.
But now the way I wanted to be displayed (through XSLT) is like through some sort of "card" with folding all columns into the rows where the number of rows has to be equal with the number of fields plus the same number of corresponding headers.
I'll show you guys an example to better understand my requirements (this sort of question has already raised before but none of the answers was satisfactory .. at least not for me).
Here's my .xml data table:
<persns> 
 <prsn> 
  <fname>Smith</fname> 
  <lname>Milton</lname> 
  <age>44</age> 
  <addrss>5th summer st, mntb</addrss>
  <city>Portland</city>
 </prsn>
 <prsn> 
  <fname>Ken</fname> 
  <lname>Jackson</lname> 
  <age>37</age> 
  <addrss>19th Penfield ave, brtcl</addrss>
  <city>Kelowna</city>
 </prsn>
 <prsn> 
  <fname>Susan</fname> 
  <lname>Arkland</lname> 
  <age>48</age> 
  <addrss>34th Mansfield st, sgtp</addrss>
  <city>Raleigh</city>
 </prsn>
<persns>

Which aproximately could be represented like this:
|======|========|=====|======================|==========|
|FNAME | LNAME  | AGE |        ADDRESS       |   CITY   |
|======|========|=====|======================|==========|
|Smith |Milton  | 44  |  5th smmr st, mntb   | Portland |
|------|--------|-----|----------------------|----------|
| Ken  |Jackson | 37  |19th Pnfeld ave, brtcl| Kelowna  |
|------|--------|-----|----------------------|----------|
|Susan |Arkland | 48  |34th Mansfield st,sgtp| Raleigh  |
|------|--------|-----|----------------------|----------|
|Patsy |Brighton| 35  |12th Peel st, pnslv   |Phldlphia |
|======|========|=====|======================|==========|
                      Fig.1

And, through some .xslt transformation I'd need that xml to be displayed like this:
  |================|    |================|
  |      FNAME     |    |     FNAME      |  <--- header name   
  |----------------|    |----------------|
  |      Smith     |    |      Ken       |  <--- corresponding element name
  |----------------|    |----------------|
  |     LNAME      |    |     LNAME      |  <--- header name
  |----------------|    |----------------|
  |     Milton     |    |    Jackson     |  <--- corresponding element name
  |----------------|    |----------------|                                        . . . and so on
  |       AGE      |    |      AGE       |
  |----------------|    |----------------|
  |       44       |    |      37        |
  |----------------|    |----------------|
  |     ADDRESS    |    |    ADDRESS     |
  |----------------|    |----------------|
  |5th smmr st,mntb|    | 9th Pnfeld ave,|
  |----------------|    |----------------|
  |      CITY      |    |      CITY      |
  |----------------|    |----------------|
  |    Portland    |    |    Kelowna     |
  |================|    |================|
                    Fig.2

As one would notice this displaying is with header first, then the element node right beneath, then next header, and again underneath it goes the corresponding node element and so forth. The next HTML table is again built first with the header on top following beneath with that node element and so on and so forth.
 And each of these blocks of elements - with corresponding headers - should be divided as HTML tables (separately).
Still being a newcomer with .xslt, I really could't figure a way of doing this, though I "made" some bad .xslt code which I'll put it down here. But, ain't working whatsoever. It yields something but not as far of what I'm really after. So here it is:
<xsl:template match="/">
 <xsl:variable name="hd_tbl">
  <head fname ="FNAME" lnme="LNAME" age="AGE" addrs="ADDRESS" oras="oras"/>
 </xsl:variable>

  <xsl:for-each select="persns/prsn | $hd_tbl/head/@*"> 
     <table id="tbl" border="1"> 
 <xsl:choose>
  <xsl:when test="(position() mod 2) != 1"> <!-- even line -->
     <tr> <th> <xsl:value-of select="./@*"/></th></tr>
  </xsl:when>
  <xsl:otherwise>
    <tr> <td> <xsl:value-of select="."/></td></tr>
  </xsl:otherwise>
 </xsl:choose>
  </table>
  </xsl:for-each>
 </xsl:template>
</xsl:stylesheet>

So you guys please help me sort this out, as I struggling with it for quite some time now.
Thank you very much in advance.

A:

If you use a flex box container for tables you can define the rest of the appearance with CSS:
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:xs="http://www.w3.org/2001/XMLSchema"
    exclude-result-prefixes="#all"
    expand-text="yes"
    version="3.0">

  <xsl:output method="html" indent="yes" html-version="5"/>

  <xsl:template match="persns">
      <div class="box">
          <xsl:apply-templates/>
      </div>
  </xsl:template>

  <xsl:template match="prsn">
      <table>
          <tbody>
              <xsl:apply-templates/>
          </tbody>
      </table>
  </xsl:template>

  <xsl:template match="prsn/*">
      <tr>
          <th>{upper-case(local-name())}</th>
      </tr>
      <tr>
          <td>{.}</td>
      </tr>
  </xsl:template>

  <xsl:template match="/" expand-text="no">
    <html>
      <head>
        <title>.NET XSLT Fiddle Example</title>
        <style>
            .box { 
              display: flex; 
            }
            .box table {
              margin-right: 1em;
              border-collapse: collapse;
              border: 1px solid black;
            }
            .box table tr, .box table td, .box table th { 
              border: 1px solid black;
            }
            .box table td, .box table th {
              text-align: center;
            }
        </style>
      </head>
      <body>
        <xsl:apply-templates/>
      </body>
    </html>
  </xsl:template>

</xsl:stylesheet>

https://xsltfiddle.liberty-development.net/pPJ9hEA

