Question

我有一个网页，其中包含许多在HTML表格中组织的复选框。该表证明最终用户在移动设备上观看时难以输入。

我被指向了flexbox css，我已经能够很好地摆放同一张桌子，并且它会在移动视口的列上折叠。

HTML

 <h2>Responsive collapse (by column)</h2>
<div class="Rtable Rtable--2cols Rtable--collapse">

  <div style="order:0;" class="Rtable-cell Rtable-cell--head"><h3>Eddard Stark</h3></div>
  <div style="order:1;" class="Rtable-cell">Has a sword named Ice</div>
  <div style="order:2;" class="Rtable-cell">No direwolf</div>
  <div style="order:3;" class="Rtable-cell Rtable-cell--foot"><strong>Lord of Winterfell</strong></div>

  <div style="order:0;" class="Rtable-cell Rtable-cell--head"><h3>Jon Snow</h3></div>
  <div style="order:1;" class="Rtable-cell">Has a sword named Longclaw</div>
  <div style="order:2;" class="Rtable-cell">Direwolf: Ghost</div>
  <div style="order:3;" class="Rtable-cell Rtable-cell--foot"><strong>Knows nothing</strong></div>

</div>

<h2>Responsive collapse (by row)</h2>
<div class="Rtable Rtable--4cols Rtable--collapse">

  <div class="Rtable-cell Rtable-cell--head"><h3>Eddard Stark</h3></div>
  <div class="Rtable-cell">Has a sword named Ice</div>
  <div class="Rtable-cell">No direwolf</div>
  <div class="Rtable-cell Rtable-cell--foot"><strong>Lord of Winterfell</strong></div>

  <div class="Rtable-cell Rtable-cell--head"><h3>Jon Snow</h3></div>
  <div class="Rtable-cell">Has a sword named Longclaw</div>
  <div class="Rtable-cell">Direwolf: Ghost</div>
  <div class="Rtable-cell Rtable-cell--foot"><strong>Knows nothing</strong></div>

</div>

codepen link

我的问题是我试图根据用户输入隐藏一些列。我每页有6列，并不总是想要全部显示。我使用jquery来做这件事。隐藏列时，即使在隐藏后更改列的总量时，它也会扭曲整个视图。

这可能吗？谢谢

使用弹性框时隐藏列

0 个答案: