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％，它保持不变，它不会伸展。我可以看到表标签本身已被拉伸，但内部不会伸展。这是由于正在显示的表：block，但它必须是display：block，否则它不会被滚动（在水平轴上）。如何在保持响应的同时实现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);
}

难以置信的简单解决方案，但花了我一段时间才意识到这一点。为表格设置min-width非常重要，因为默认情况下表格宽度是灵活的，因此如果不设置min-width，它将永远不会滚动。它将导致一个缩小的表格，以至于不再可能缩小。

响应表100％宽度

1 个答案: