Как сделать так, чтобы HTML столбцы таблицы складывались вертикально внутри строк, охватывающих всю ширину

Question

У меня есть следующая проблема, связанная с отображением строк в нескольких строках HTML. Я хотел, чтобы все эти элементы отображались как некая «карточка» со сворачиванием всех столбцов в строки, где количество строк должно быть равно количеству полей плюс одинаковое количество соответствующих заголовков.

Я приведу пример, чтобы лучше объяснить мои требования (этот вопрос уже задавался ранее, но для меня он не был вполне удовлетворительным).

 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>

Эта таблица может быть приблизительно представлена ​​следующим образом:

|======|========|=====|======================|==========|
|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

И, через некоторые CSS (или даже Bootstrap или что угодно) Мне нужно было бы отобразить это следующим образом:

|================|    |================|
|      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

Но я мог бы отобразить это только так:

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

Но, как можно видеть, это отображение не переплетены заголовки, так что это совершенно неудовлетворительно.

Итак, чтобы подвести итог, мне нужно, чтобы эта таблица из рисунка 1 отображалась как на рисунке 2, а НЕ как на рисунке 3!

Answer 1

Если вы хотите составить таблицу, как у вас был данный пример.

Сделайте таблицу связанной с вашим выбором, используя CSS и Jquery с Responsive также Sticky Table Header, я надеюсь, это будет полезно для вас.

приведенный ниже пример. Спасибо.

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>

В Responsive это будет выглядеть как