How to make HTML table columns stack vertically within rows spanning the full width

Question

I have the following problem regarding stacked displaying some HTML tables rows. The way I wanted all those to be displayed is like some sort of "card" with folding all columns into the rows, where the number of rows to be equal with the number of fields plus the same number of corresponding headers.

I'll give an example to better explain my requirement (this question was already asked before but wasn't quite satisfactory for me).

 table {border:none }
    tbody { display:flex; }
    tbody > tr
    {
     display:flex;
     flex-direction:column;
     align-items:center;
     margin:5px;
     border: 1px solid black;
    }

    thead > tr
    {
     display:none;  
    }

    tbody > tr > td
    { 
     display:flex;
     justify-content:center;
     align-items:flex-start;
     padding:5px;
    }

    <table>
     <thead><tr><th>FNAME</th><th>LNAME</th><th>AGE</th><th>ADDRSS</th><th>CITY</th> </tr></thead>
      <tbody>
       <tr><td>Smith</td><td>Milton</td><td>44</td><td>5th summer st, mntb</td><td>Portland</td></tr>
       <tr><td>Ken</td><td>Jackson</td><td>37</td><td>19th Penfield ave, brtcl</td><td>Kelowna</td></tr>
       <tr><td>Susan</td><td>Arkland</td><td>48</td><td>34th Mansfield st, sgtp</td><td>Raleigh</td></tr>
       <tr><td>Patsy</td><td>Brighton</td><td>35</td><td>12th Peel st, pnslv</td><td>Philadelphia</td></tr>
     </tbody>
    </table>

This table could approximately 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 CSS (or even Bootstrap or whatever) I'd need to display it as follows:

|================|    |================|
|      FNAME     |    |     FNAME      |    
|----------------|    |----------------|
|      Smith     |    |      Ken       |
|----------------|    |----------------|
|     LNAME      |    |     LNAME      |
|----------------|    |----------------|
|     Milton     |    |    Jackson     |
|----------------|    |----------------|    . . .  and so on
|       AGE      |    |      AGE       |
|----------------|    |----------------|
|       44       |    |      37        |
|----------------|    |----------------|
|     ADDRESS    |    |    ADDRESS     |
|----------------|    |----------------|
|5th smmr st,mntb|    | 9th Pnfeld ave,|
|----------------|    |----------------|
|      CITY      |    |      CITY      |
|----------------|    |----------------|
|    Portland    |    |    Kelowna     |
|================|    |================|
                  Fig.2

But I could only display it this way:

    |----------------|    
    |      Smith     |    
    |----------------|    
    |     Milton     |    
    |----------------|    
    |       44       |    
    |----------------|    
    |5th smmr st,mntb|    
    |----------------|    
    |    Portland    |    
    |----------------|
         Fig.3

But, as one could see, this display fails to intertwined the headers, so it is completely unsatisfactory.

So, to recap, I need that table from Fig.1 to be displayed like in the Fig. 2, NOT like in Fig. 3!

Answer 1

If you want to make a table like you had the given example.

Make the table related your choice using CSS and Jquery with Responsive also Sticky Table Header, I hope it will be helpful to you.

given below Example. Thank you.

table {border: none}
tbody {display: flex;}
tbody > tr {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 5px;
    overflow: hidden;
    border-bottom: none;
    border: 1px solid black;
}
thead {display: none;}
tbody > tr > td {
    display: block;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #000;
    padding: 5px;
    font-size: 14px;
    font-family: sans-serif;
}
tbody > tr > td::before {
    content: attr(data-title);
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}
@media only screen and (max-width:575.98px){
  table{width:80%;margin:0 auto}
  tbody {display: block;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="container mt-5">
          <table>
              <thead>
                  <tr>
                      <th>FNAME</th>
                      <th>LNAME</th>
                      <th>AGE</th>
                      <th>ADDRSS</th>
                      <th>CITY</th>
                  </tr>
              </thead>
              <tbody>
                  <tr>
                      <td data-title="FNAME">Smith</td>
                      <td data-title="LNAME">Milton</td>
                      <td data-title="AGE">44</td>
                      <td data-title="ADDRESS">5th summer st, mntb</td>
                      <td data-title="CITY">Portland</td>
                  </tr>
                  <tr>
                      <td data-title="FNAME">Ken</td>
                      <td data-title="LNAME">Jackson</td>
                      <td data-title="AGE">37</td>
                      <td data-title="ADDRESS">19th Penfield ave, brtcl</td>
                      <td data-title="CITY">Kelowna</td>
                  </tr>
                  <tr>
                      <td data-title="FNAME">Susan</td>
                      <td data-title="LNAME">Arkland</td>
                      <td data-title="AGE">48</td>
                      <td data-title="ADDRESS">34th Mansfield st, sgtp</td>
                      <td data-title="CITY">Raleigh</td>
                  </tr>
                  <tr>
                      <td data-title="FNAME">Patsy</td>
                      <td data-title="LNAME">Brighton</td>
                      <td data-title="AGE">35</td>
                      <td data-title="ADDRESS">12th Peel st, pnslv</td>
                      <td data-title="CITY">Philadelphia</td>
                  </tr>
              </tbody>
          </table>
      </div>

In Responsive it will look like