带切换的响应式垂直/水平标题表 [英] Responsive vertical/horizontal heading table with toggle

问题描述

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

I have a table that has vertical and horizontal headings. I want to achieve that each row will be greouped together on mobile. Each row's heading will be the main title so to say and it would contain all the top heading with the corresponding row data.

<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>

这个表格看起来像这样:

This table would look like this:

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 解决方案 - 我尝试使用数据表，但没有得到这种结果.

I don't want to solve this with predefined content before in css, since the tables will be dynamic. I don't mind if its a javascript/jquery solution - I tried with datatables, but didn't manage to get this kind of result.

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

Only 1 table can be used - using 2 tables and hide/show them is not an option in this case.

推荐答案

我建议你使用 css 和 html 的解决方案.

I propose you a solution with css and html.

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

You play with display as in DEMO below. For demo I just reproduce it with BMW 3 but I guess you can easily make it for the other as well.

带有 2 个表格的 DEMO(将在 680px 宽度处更改):

DEMO with 2 tables (will change at 680px width):

.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 并且相当不错，正如我在你的问题下面评论的那样.

In Demo 2, I added directly lines correctly organised, directly into your original table. As you did not mention if you can or not make that. If you cannot do that then yeah, it should be js and quite a job, as I commented below your question.

.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 is your original table that we custom with JS. To get final result as demo 2:

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>

这篇关于带切换的响应式垂直/水平标题表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！