响应式 table 宽度为 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%; }

这里是fiddle：

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

如您所见，只要页面宽度小于 table 宽度，就有 4 列和滚动 class 使 table 可滚动。但是，如果我想让 table 宽度为 100%，它会保持不变，不会拉伸。我可以看到 table 标签本身被拉伸了，但内部没有拉伸。这是由于 table 是 display: block 造成的，但是它必须是 display: block，否则它不会滚动（在水平轴上）。如何在保持响应的同时达到 100% 宽度 table？

Answer 1

正如他们所说，跳出框框思考，所以我跳出 table 框框，将 table 包裹在一个容器中：

<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);
}

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

响应式 table 宽度为 100%

Responsive table with 100% width

html

css

zurb-foundation

zurb-foundation-6