响应式数据表 |根据屏幕大小更改标记

Question

我有一个桌面设计，带有 7 列表格状网格（使用 Bootstrap），列名在顶部。

在小屏幕上，网格应该变成 3 列。 7 个列名被分成 2 个单独的行，并与其他行交错。基本上，标记的顺序会根据屏幕大小完全改变。

解决这个问题的最佳方法是什么？

我原本以为我会使用 jQuery 来剪切和粘贴内容，但现在我怀疑

我还看到了关于 responsejs 的评论：Replace HTML depending on screen size 这为您提供了一种用户友好的方式来根据屏幕大小交换内容，看起来几乎就像有一个单独的移动页面......

Answer 1

早期解决方案：

<table>
    <tr>
        <th>Header1</th>
        <th>Header2</th>
        <th>Header3</th>
        <th class="visible-desktop">Header4</th>
        <th class="visible-desktop">Header5</th>
        <th class="visible-desktop">Header6</th>
        <th class="visible-desktop">Header7</th>
    </tr>
    <tr>
        <td>Data1</td>
        <td>Data2</td>
        <td>Data3</td>
        <td class="visible-desktop">Data4</td>
        <td class="visible-desktop">Data5</td>
        <td class="visible-desktop">Data6</td>
        <td class="visible-desktop">Data7</td>
    </tr>
</table>

编辑： 所以你的意思是你想要这个用于小屏幕：

H1 H2 H3
D1 D2 D3
H4 H5 H6 H7
D4 D5 D6 D7

然后你打算如何获得下一行数据？像这样？ ：

H1 H2 H3
D1 D2 D3
H4 H5 H6 H7
D4 D5 D6 D7
H1 H2 H3
D8 D9 D10
H4  H5  H6  H7
D11 D12 D13 D14

这并不能在小屏幕上制作出非常好的用户界面！

但是，如果您仍然想这样做，那么我建议您使用 span div 而不是表格。

在那种情况下是这样的：

<div class='span12'> //Entire row1 which will be split into 2 for smaller screens 
    <div class='span6'>
         <div class='span2'>
             <table>
                 <tr>
                 <td>H1</td>
                 </tr>
                  <tr>
                 <td>D1</td>
                 </tr>
             </table>
         </div>
         <div class='span2'>
              <table>
                     <tr>
                     <td>H2</td>
                     </tr>
                      <tr>
                     <td>D2</td>
                     </tr>
                 </table>
         </div>
         <div class='span2'>
          <table>
                 <tr>
                 <td>H3</td>
                 </tr>
                  <tr>
                 <td>D3</td>
                 </tr>
             </table>
         </div>
    </div>
    <div class='span6'>
        /*And so on*/
    </div>
</div>
<div class='span12'> //Entire row1 which will be split into 2 for smaller screens 
...
</div>