html - 具有 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/

如您所见，只要页面宽度小于表格宽度，就有 4 列和滚动类使表格可滚动。但是，如果我想让表格宽度为 100%，它会保持不变，不会拉伸(stretch)。我可以看到 table 标签本身被拉伸(stretch)了，但内部没有拉伸(stretch)。这是由于表格正在显示: block ，但它必须是显示: 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);
}

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