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

我有一个桌面设计，具有7列表格式的网格（使用Bootstrap），列名在顶部。响应数据表|根据屏幕大小更改标记

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

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

我本来以为我会使用jQuery剪切和粘贴内容，但现在我的猜测是

我也看到了responsejs此评论：它给你一个用户Replace HTML depending on screen size 根据屏幕尺寸友好的方式来交换的内容，看起来几乎就像有对移动虽然是独立的网页...

2013-09-23 mustacheMcGee

嘛，我误解你的问题，并与东西是不是答案来了，但我不希望工作去浪费，所以在这里是通过Bootstrap 3考虑的事情：http://bootply.com/82732 –

感谢您的尝试虽然:)是的，这基本上是我现在拥有的。我想也许这样的事情会做到这一点：http://stackoverflow.com/questions/9886676/jquery-add-closing-tag-and-then-reopen-when-using-before – mustacheMcGee

尽早解决：

<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

那么这不会使一个很好的用户界面在一个小屏幕上！

但是，如果你仍然想这样做，那么我会建议你使用跨度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>

来源

2013-09-24 18:26:46 user1071979

实际上，而不是头4,5， 6,7消失，然后需要在Data3之后的自己的行上插入 – mustacheMcGee

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

回答

相关问题