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>

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

1 个答案: