Question

＆＃13;

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

＆＃13;

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

＆＃13;

我有一张桌子，我希望按列拆分到标签页（移动设备）。与OS数量相等的选项卡数量（例如，它将是5个选项卡）。像这样https://www.shopify.com/pricing see 3 tabs by column

我怎么能意识到这一点？提前谢谢？

Answer 1

默认情况下，表格没有响应，所以你需要一点点技巧，这个链接帮了我很多，并为你的问题提供了解决方案。

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

折叠表的列到移动设备的选项卡

1 个答案: