响应式 div 元素内的表格（导致调整窗口大小时重叠）答案

【问题标题】：Table inside responsive div element (causes overlapping on resizing window)响应式 div 元素内的表格（导致调整窗口大小时重叠）
【发布时间】：2018-05-06 18:03:27
【问题描述】：

我是前端编程的新手。我已将应用程序的后端制作为 R Shiny 应用程序，并且我正在尝试为此信息进行布局，这需要以 HTML 和 CSS 形式呈现表格数据。

我正在使用Tachyons CSS 库，因为我希望它可以使设计布局变得更加容易。

我正在使用他们文档页面底部的代码模板示例“三列 - 折叠为单列”：here。这非常有效，但是当我在 div 中放置一个表格时，div 元素突然在页面重新调整大小时重叠。

为了更好地解释这一点，我提供了以下屏幕截图和两个带有代码的代码笔的链接。

请注意，由于某种原因，codepen 上的视觉输出看起来与我的浏览器上的不同（见下文），因此可能需要在本地运行，但 HTML 和 CSS 代码可以帮助识别问题）。

当 div 仅包含数字（不是表格）时的屏幕截图：codepen

<body>
  <!-- first row of blocks -->
<div class="mw9 center ph3-ns">
  <div class="cf ph2-ns">
    <div class="fl w-100 w-25-ns pa2">
      <div class="outline bg-white pv4">1</div>
    </div>
    <div class="fl w-100 w-25-ns pa2">
      <div class="outline bg-white pv4">2</div>
    </div>
    <div class="fl w-100 w-50-ns pa2">
      <div class="outline bg-white pv4">3+4</div>
    </div>
  </div>
</div>

  <!-- second row of blocks -->
 <div class="mw9 center ph3-ns">
  <div class="cf ph2-ns">
    <div class="fl w-100 w-25-ns pa2">
      <div class="outline bg-white pv4">5</div>
    </div>
    <div class="fl w-100 w-25-ns pa2">
      <div class="outline bg-white pv4">6</div>
    </div>
    <div class="fl w-100 w-50-ns pa2">
      <div class="outline bg-white pv4">7+8</div>
    </div>
  </div>
</div>
 </div>
 </body>

仅包含文本 - 浏览器窗口足够宽以至于它们是全尺寸的
- 仅包含文本 - 浏览器窗口变窄，以便框挤在一起
- 当浏览器窗口变得非常窄时，框会折叠成一列

div中有表格时的截图：codepen

  <body>
  <!-- first row of blocks -->
<div class="mw9 center ph3-ns">
  <div class="cf ph2-ns">
    <div class="fl w-100 w-25-ns pa2">
      <div class="outline bg-white pv4">
         <table class="table-custom" style="width:100%">
            <tr>
              <th>Name</th>
              <th>Date</th> 
              <th>Score</th>
              <th>Average</th>
              <th>Total</th>
            </tr>
            <tr>
              <td>Tom</td>
              <td>15/07</td>
              <td>135</td>
              <td>135</td>
              <td>144</td>
            </tr>
            <tr>
              <td>Tom</td>
              <td>15/07</td>
              <td>135</td>
              <td>135</td>
              <td>144</td>
            </tr>
            <tr>
              <td>Tom</td>
              <td>15/07</td>
              <td>135</td>
              <td>135</td>
              <td>144</td>
            </tr>
              <td>Tom</td>
              <td>15/07</td>
              <td>135</td>
              <td>135</td>
              <td>144</td>
            </tr>
        </table>
      </div>
    </div>
    <div class="fl w-100 w-25-ns pa2">
      <div class="outline bg-white pv4">2</div>
    </div>
    <div class="fl w-100 w-50-ns pa2">
      <div class="outline bg-white pv4">3+4</div>
    </div>
  </div>
</div>

  <!-- second row of blocks -->
 <div class="mw9 center ph3-ns">
  <div class="cf ph2-ns">
    <div class="fl w-100 w-25-ns pa2">
      <div class="outline bg-white pv4">5</div>
    </div>
    <div class="fl w-100 w-25-ns pa2">
      <div class="outline bg-white pv4">6</div>
    </div>
    <div class="fl w-100 w-50-ns pa2">
      <div class="outline bg-white pv4">7+8</div>
    </div>
  </div>
</div>
 </div>
 </body>

当浏览器窗口很大时，第一个 div 中有表格时（效果很好）
但是，当窗口尺寸变小时，框之间会出现重叠

如何防止这种重叠发生？我在生成屏幕截图时使用的是 firefox 57.0（64 位）。

在过去的 2 天里，我一直在努力解决这个问题，非常感谢任何帮助。

谢谢

【问题讨论】：

它似乎只是溢出了，当表格数据太大而无法容纳在网格单元格中时，您需要使用类似overflow: auto; 的内容将表格包装在一个 div 中以创建滚动条。 .. 表格列不换行。

标签： html css responsive-design tachyons-css

【解决方案1】：

只需在要防止溢出的列上放置一个.table-holder 并声明以下规则：

.table-holder {
  overflow-x:auto;
}

当其内容的宽度超过其自身宽度时，这将使您的列水平滚动。我假设这是您想要的，尽管我意识到您只指定了问题所在，而不是您希望如何处理它。如果这不是您想要的，您可能应该澄清一下。

如果不是很明显，你可以使用任何你想要的类名，table-holder 只是我想给它的名字，因为我喜欢即使我在一个项目中返回也能弄清楚事情是什么很久很久之后，我不记得我在那里做了什么。

【讨论】：

是的，这解决了它。非常感谢！
由于您已经在使用 Tachyons，您可以使用 .overflow-x-auto，这样您就不需要创建新类了。
@martias：假设我在 5 年前学得非常好 Bootstrap v2 类。那现在有什么用？从长远来看，了解和理解特定库的类背后的 CSS 属性比了解类更有价值和有用。我在回答大多数 CSS 问题时都考虑到了这一点：库有来来去去的趋势； CSS 属性有保留的趋势。
我的评论实际上对@0mm3 意味着更多，但是是的，我同意你所说的。
注意，只有当您使用 @ 提及 cmets 时，OP 才会收到有关 cmets 答案的通知。但他们确实会收到有关对其问题的任何评论的通知，无需提及。您只能提及/评论一次。