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

Posted 2023-05-07

【中文标题】带切换的响应式垂直/水平标题表

【英文标题】：Responsive vertical/horizontal heading table with toggle

【发布时间】：2021-01-25 16:01:21

【问题描述】：

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

<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 个表格并隐藏/显示它们。

【问题讨论】：

但我认为这里的问题基本上是你的html表结构。但是你是这样理解的，还是你自己做的？因为我认为最简单的方法是在 html 中制作 2 个表格并显示一个用于移动设备和一个用于计算机

不幸的是我不能使用 2 张桌子。这是我必须处理的。以某种方式转换这 1 个表

好的，我想您应该将此信息添加到您的问题中。那是相当具有挑战性的

我将编辑并添加它

不幸的是，这不是表格的工作方式。您可能可以通过将几乎每个表格元素（table、tr、th、tbody、thead 和 td）的 display 规则设置为 block )，但是 a) 可能不适用于 DataTables 插件，并且 b) 可能会破坏屏幕阅读器的表格语义（如果可访问性是一个问题）。

【参考方案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>

【讨论】：

我同意你的观点，如果他不需要使用积木元素，也许这是一个解决方案......投票+1

不幸的是，我只能使用 1 张桌子。 Ofc 这将是一个简单的解决方案，但这就是我必须使用的。这也是我尝试使用数据表的原因

@mheonyae 现在我做了 2 个解决方案，有 1 个表，但我想你需要的是最后一个演示。最后，我真的想在没有这么多代码的情况下让它变得简单

是的，解决了移动部分，但弄乱了桌面部分，因为它是空的。猜猜我是否在附加之前克隆每个元素，所以可以做到这一点

是的，确实，我将其标记为答案。