100％宽度的响应式桌子

Question

这是代码：

<div class="row">
  <div class="large-12 columns">

    <table class="scroll wide">

      <tr>
        <td>First</td>
        <td>Second</td>
        <td>Third</td>
        <td>Forth</td>
      </tr>

    </table>

  </div>
</div>

的CSS

.wide { width: 100%; }

这是小提琴：

https://jsfiddle.net/emilcieslar/zc37ydys/

如您所见，只要页面的宽度小于表的宽度，就有4列和滚动类使表可滚动。但是，如果我想使桌子的宽度为100％，它保持不变，就不会拉伸。我可以看到table标签本身是拉伸的，但是内部却没有拉伸。这是由于表正在显示：块引起的，但是必须是显示：块，否则它将无法滚动（在水平轴上）。如何在仍保持响应状态的同时实现100％宽度的表格？

Answer 1

就像他们说的那样，开箱即用，所以我跳出表框，将表包装在容器中：

<div class="horizontal-scroll">
  <table class="my-table"><!-- without scroll class now -->
  ...
  </table>
</div><!-- /horizontal-scroll -->

使用CSS：

.horizontal-scroll {
  overflow: hidden;
  overflow-x: auto;
  clear: both;
  width: 100%;
}

.my-table {
  min-width: rem-calc(640);
}

非常简单的解决方案，但花了我一段时间才意识到。为表格设置最小宽度很重要，因为默认情况下表格宽度是灵活的，因此如果您不设置最小宽度，它将永远不会滚动。这将导致表缩小到无法再缩小的程度。