小屏幕上的表格显示为列表，其中几列折叠并显示在手风琴上答案

【问题标题】：Table on smaller screen to appear as list with several columns collapsed and shown on accordion小屏幕上的表格显示为列表，其中几列折叠并显示在手风琴上
【发布时间】：2018-05-18 12:14:26
【问题描述】：

我在引导程序中有一个表，如下所示：

<table class="table table-striped">
<thead>
<tr>
  <th>Date</th>
  <th>Name</th>
  <th>LastName</th>
  <th>Color</th>
   <th>Car</th>
  <th>Year</th>
  <th>Price</th>

 </tr>
 </thead>
 <tbody>
<tr>
  <td>01/02/2017</td>
  <td>Dan</td>
  <td>Green</td>  
  <td>Blue</td>
  <td>BMW</td>
  <td>2016</td>  
  <td>100k</td>
</tr>
    <tr>
  <td>01/02/2017</td>
  <td>Dan</td>
  <td>Green</td>  
  <td>Blue</td>
  <td>BMW</td>
  <td>2016</td>  
  <td>100k</td>
</tr>
    <tr>
  <td>01/02/2017</td>
  <td>Dan</td>
  <td>Green</td>  
  <td>Blue</td>
  <td>BMW</td>
  <td>2016</td>  
  <td>100k</td>
</tr>
    <tr>
  <td>01/02/2017</td>
  <td>Dan</td>
  <td>Green</td>  
  <td>Blue</td>
  <td>BMW</td>
  <td>2016</td>  
  <td>100k</td>
</tr>
    <tr>
  <td>01/02/2017</td>
  <td>Dan</td>
  <td>Green</td>  
  <td>Blue</td>
  <td>BMW</td>
  <td>2016</td>  
  <td>100k</td>
</tr>

 </tbody>
 </table>

我想要做的是在一个断点上，比如说一个小于 768px 的屏幕，像这样显示表格：

DATE:01/05/2017
car:BMW

然后点击这一行显示：

 Name:Dan
 LastName:Green
 Color:blue
 Year:2016

有没有办法通过引导程序实现这一点？或者也许我不应该将所有内容都放在表格中，而是将元素放在列表中，并让它们显示为表格（单元格）并在较小的屏幕上对齐它们？因为一开始我想创建两个视图并根据屏幕大小显示/隐藏它们，因为我不知道如何做到这一点。我是初学者，所以我提前道歉。我不知道哪些是最佳实践以及如何实现这一点，最好只使用 css。而 JS 仅在单击时才能隐藏和显示该部分。

这是一个 js 小提琴Bootstrap Table

感谢任何帮助。

【问题讨论】：

最好展示你迄今为止所尝试的，然后人们可以从那时起帮助你

标签： html css html-table bootstrap-4

【解决方案1】：

对于布局，您应该查看引导网格。 https://getbootstrap.com/docs/4.0/layout/grid/

从技术上讲，它不使用“表格”，而是使用 div，并且您可以设置希望 div 为每个屏幕尺寸占用多少列。当我开始使用引导程序时，我看了这个很好的 youtube 教程，它很好地解释了它https://www.youtube.com/watch?v=g3LRU3JF-rQ

【讨论】：