带切换的响应式垂直/水平标题表

Question

我有一个有垂直和水平标题的表格。我想实现每一行都将在移动设备上组合在一起。可以说，每一行的标题都是主标题，它将包含所有顶部标题以及相应的行数据。

<table class="table">
  <thead>
    <tr>
      <th class="empty"></th>
      <th>0-50</th>
      <th>0-75</th>
      <th>0-100</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>BMW M3</th>
      <td>4.2</td>
      <td>4.9</td>
      <td>5.7</td>
    </tr>
    <tr>
      <th>BMW M4</th>
      <td>4.1</td>
      <td>4.6</td>
      <td>5.4</td>
    </tr>
    <tr>
      <th>Mercedes AMG E63</th>
      <td>4.4</td>
      <td>4.9</td>
      <td>5.9</td>
    </tr>
  </tbody>
</table>

此表如下所示：

BMW M3
-------
0-50 4.2
0-75 4.9
0-100 5.7
-------

BMW M4
-------
0-50 4.1
0-75 4.6
0-100 5.4
-------

Mercedes AMG E63
-------
0-50 4.4
0-75 4.9
0-100 5.9
-------

我不想在 css 中使用预定义的内容来解决这个问题，因为表格是动态的。我不介意它是否是 javascript/jquery 解决方案 - 我尝试使用数据表，但没有设法获得这种结果。

只能使用 1 个表格 - 在这种情况下，不能使用 2 个表格并隐藏/显示它们。

Answer 1

我建议您使用 css 和 html 的解决方案。

您在下面的演示中使用显示。对于演示，我只是用 BMW 3 重现它，但我想你也可以轻松地为另一个制作它。

带有 2 个表格的演示（将更改为 680 像素宽度）：

.computer{
  display: table;
}
.mobile{
  display:none;
}

@media only screen and (max-width:680px){
  .computer{
    display: none;
  }
  .mobile{
    display:table;
  }
}

<table class="table computer">
  <thead>
    <tr>
      <th class="empty"></th>
      <th>0-50</th>
      <th>0-75</th>
      <th>0-100</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>BMW M3</th>
      <td>4.2</td>
      <td>4.9</td>
      <td>5.7</td>
    </tr>
    <tr>
      <th>BMW M4</th>
      <td>4.1</td>
      <td>4.6</td>
      <td>5.4</td>
    </tr>
    <tr>
      <th>Mercedes AMG E63</th>
      <td>4.4</td>
      <td>4.9</td>
      <td>5.9</td>
    </tr>
  </tbody>
</table>

<table class="table mobile">
  <thead>
    <tr>
      <th colspan="2">BMW M3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>0-50</th>
      <td>4.2</td>
    </tr>
    <tr>
      <th>0-75</th>
      <td>4.9</td>
    </tr>
    <tr>
      <th>0-100</th>
      <td>5.7</td>
    </tr>
  </tbody>
</table>

在演示 2 中，我直接将正确组织的行添加到您的原始表格中。正如你没有提到你是否能做到这一点。如果你不能这样做，那么是的，它应该是 js，而且是一份相当不错的工作，正如我在你的问题下面评论的那样。

带有 1 个表的演示 2

.computer{
  display: table;
}
.mobile{
  display:none;
}

@media only screen and (max-width:680px){
  .computer{
    display: none;
  }
  .mobile{
    display:table;
  }
}

<table class="table">
  <thead class="computer">
    <tr>
      <th class="empty"></th>
      <th>0-50</th>
      <th>0-75</th>
      <th>0-100</th>
    </tr>
  </thead>
  <tbody>
    <tr class="computer">
      <th>BMW M3</th>
      <td>4.2</td>
      <td>4.9</td>
      <td>5.7</td>
    </tr>
    <tr class="computer">
      <th>BMW M4</th>
      <td>4.1</td>
      <td>4.6</td>
      <td>5.4</td>
    </tr>
    <tr class="computer">
      <th>Mercedes AMG E63</th>
      <td>4.4</td>
      <td>4.9</td>
      <td>5.9</td>
    </tr>
    <!------- [START] Mobile ----------->
    <tr class="mobile">
      <th colspan="2">BMW M3</th>
    </tr>
    <tr class="mobile">
      <th>0-50</th>
      <td>4.2</td>
    </tr>
    <tr class="mobile">
      <th>0-75</th>
      <td>4.9</td>
    </tr>
    <tr class="mobile">
      <th>0-100</th>
      <td>5.7</td>
    </tr>
    <!------- [END] Mobile ----------->
  </tbody>
</table>

DEMO 3 是我们用 JS 自定义的原始表格。要获得演示 2 的最终结果：

DEMO 3 Inspire from demo 2 with js dynamic：

var tbodyTr = $('tbody > tr');

tbodyTr.each(function(){
  
  var theadMobile = $(this).find('th');

  $('tbody > tr:last').after('<tr class="mobile"></tr>');
  $('tbody > tr:last').append('<th></th>');
  $('tbody > tr:last > th').append(theadMobile.html());

  var i = 1;
  $(this).find('td').each(function(){
    var thHeaders = $('thead > tr > th').eq(i).html();
  
    $('tbody > tr:last').after('<tr class="mobile"></tr>');
    $('tbody > tr:last').append('<th></th>');
    $('tbody > tr:last > th').append(thHeaders);
    $('tbody > tr:last').append($(this).html());

    i++;
  });
});

$('thead').addClass('computer');
$('tbody > tr').each(function(){
  if (!$(this).hasClass("mobile"))
    $(this).addClass('computer');
});

.computer{
  display: table;
}
.mobile{
  display:none;
}

@media only screen and (max-width:680px){
  .computer{
    display: none;
  }
  .mobile{
    display:table;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
  <thead>
    <tr>
      <th class="empty"></th>
      <th>0-50</th>
      <th>0-75</th>
      <th>0-100</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>BMW M3</th>
      <td>4.2</td>
      <td>4.9</td>
      <td>5.7</td>
    </tr>
    <tr>
      <th>BMW M4</th>
      <td>4.1</td>
      <td>4.6</td>
      <td>5.4</td>
    </tr>
    <tr>
      <th>Mercedes AMG E63</th>
      <td>4.4</td>
      <td>4.9</td>
      <td>5.9</td>
    </tr>
  </tbody>
</table>