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 |年龄|地址|城市| | ------ | -------- | ----- | ---------------------- | ---- ------ | |史密斯|米尔顿| 44 | MNTB 5号SMMR ST |波特兰| |肯|杰克逊| 37 | Pnfeld大道19号，brtcl |基洛纳| |苏珊|奥克兰| 48 | 34th Mansfield st，sgtp |罗利| |猫|布赖顿| 35 |第12名Peel st，pnslv |费城| 图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>

在响应式中，它看起来像

如何使HTML表格列在垂直于整个宽度的行内垂直堆叠

1 个答案: