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

如何解决带有切换功能的响应式垂直/水平标题表

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

<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个表进行隐藏/显示。

解决方法

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

您将像下面的演示中一样使用显示进行播放。对于演示，我只是使用BMW 3进行了复制，但我想您也可以轻松地将其复制。

带有2个表的DEMO（将以680px的宽度更改）：

.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的最终结果，

演示2中的demo 3启发了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>