javascript - 将表格的列折叠到移动设备的选项卡

标签 javascript css

td{width:100px;text-align:center;}
.hh,th{font-weight:bold;color:magenta;}

<div id="page-wrap">
<table>
    <thead>
    <tr>
        <th class="hh">OS</th>
        <th>Windows</th>
        <th>Linux</th>
        <th>iOs</th>
        <th>Android</th>
        <th>etc</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="hh">Option 1</td>
        <td>value</td>
        <td>value</td>
        <td>value</td>
        <td>value</td>
        <td>value</td>
    </tr>
    <tr>
      <td class="hh">Option 2</td>
        <td>value</td>
        <td>value</td>
        <td>value</td>
        <td>value</td>
        <td>value</td>
    </tr>
    <tr>
      <td class="hh">Option 3</td>
        <td>value</td>
        <td>value</td>
        <td>value</td>
        <td>value</td>
        <td>value</td>
    </tr>
    <tr>
      <td class="hh">Option 4</td>
        <td>value</td>
        <td>value</td>
        <td>value</td>
        <td>value</td>
        <td>value</td>
    </tr>
    </tbody>
</table>
</div>

我有一个表格，我想按列将其折叠到选项卡(用于移动设备)。选项卡的数量等于操作系统的数量(例如，它将是 5 个选项卡)。像这样https://www.shopify.com/pricing see 3 tabs by column

我如何实现这一点？提前致谢？

最佳答案

默认情况下，表格没有响应，因此您需要使用一些技巧，此链接对我帮助很大，并为您的问题提供了解决方案。

https://css-tricks.com/responsive-data-tables/

关于javascript - 将表格的列折叠到移动设备的选项卡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43995351/