3

这是代码：

<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 是 display: block 引起的，但是它必须是 display: block，否则它将无法滚动（在水平轴上）。如何在保持响应的同时实现 100% 宽度的表格？

4

1 回答 1

7

正如他们所说，跳出框框思考，所以我想跳出桌子框并将桌子包裹在容器中：

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

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

于 2016-01-20T11:31:00.827 回答