Question

我想知道是否有可能制作响应表（响应意味着行分离并且低于彼此）<th>跟随列。

这就是我现在所拥有的，这是我的Codepen

我之所以不使用bootstrap是因为我无法访问此特定项目的HTML，所以我希望也许有人知道如何让<th>关注其内容

HTML

<table>
  <thead>
    <tr>
      <th>
        Col 1
      </th>
      <th>
        Col 2
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Left content
      </td>
      <td>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris efficitur eleifend nisi eu rhoncus. Morbi scelerisque rutrum ipsum, pretium consectetur augue consequat et.
      </td>
    </tr>
    <tr>
      <td>
        Left content
      </td>
      <td>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris efficitur eleifend nisi eu rhoncus. Morbi scelerisque rutrum ipsum, pretium consectetur augue consequat et.
      </td>
    </tr>
    <tr>
      <td>
       Left content
      </td>
      <td>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris efficitur eleifend nisi eu rhoncus. Morbi scelerisque rutrum ipsum, pretium consectetur augue consequat et.
      </td>
    </tr>
  </tbody>
</table>

CSS

td {
 padding: 20px;
}

@media all and (max-width:768px) {
         tr {    
           display: table-row;  
           width:100%;    
  }               
         td {    
           display: table-row; 
  }  
            th { 
          display: table-row; 
  }
    }

Answer 1

如果您的数据不是表格数据，则可以使用简化标记和Flexbox

Codepen Demo

在较小的屏幕上，flex-direction为column，并且所有标题的order属性都小于div所有属性（因此它们可以首先显示）

当媒体屏幕匹配时，内容将水平放置。通过flex-basis和flex-wrap，您可以将内容包装在行中。

<强>标记

<main>

  <h2>Title 1</h2>
  <div>
    <p>Lorem ipsum 1 ... 
  </div>

  <h2>Title 2</h2>
  <div>
    <p>Lorem ipsum 2 ...
  </div>

  <h2>Title 3</h2>
  <div>
    <p>Lorem ipsum 3 ...
  </div>

</main>

<强> CSS

main {
   display: flex;
   flex-direction: column;
}

main > h2 {  order: 1; }
main > div { order: 2; }

@media all and (min-width: 768px) {
  main {
    flex-direction: row;
    flex-wrap: wrap;
  }

  main > h2,
  main > div { order: 1; }

  main > h2 { flex: 1 0 25%; }
  main > div { flex: 1 0 75%; }

}

响应表，其中标题跟随内容

1 个答案: