Table 在响应式 div 元素内（导致在调整大小时重叠 window）

Question

我是前端编程新手。我已经将应用程序的后端制作为 R Shiny 应用程序，并且我正在尝试为需要在 HTML 和 CSS 中显示表格数据的信息制作布局。

我正在使用 Tachyons CSS 库，因为我希望它能使布局设计更容易。

我正在使用他们的文档本页底部的代码模板示例 'Three Columns - Collapse to Single'：here。这非常有效，但是当我在 div 中放置一个 table 突然 div 元素在页面重新调整大小时重叠。

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

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

当 div 只包含数字（不是 table）时的屏幕截图：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>

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

div中有table时的截图：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>

当浏览器window较大时第一个div中有table时（效果很好）
但是，当 window 尺寸变小时，框之间现在有重叠

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

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

谢谢

Answer 1

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

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

这将使您的列在内容宽度超过其自身宽度时可水平滚动。我假设这就是你想要的，虽然我知道你只指定了问题是什么，而不是你希望如何处理它。如果那不是你想要的，你应该澄清一下。

如果不是很明显，你可以使用任何你想要的 class 名称，table-holder 只是我给它起的名字，因为我喜欢能够弄清楚什么东西即使我 return 在很长很长一段时间后的一个项目中，不记得我在那里做过什么。

Table 在响应式 div 元素内（导致在调整大小时重叠 window）

Table inside responsive div element (causes overlapping on resizing window)

html

css

responsive-design

tachyons-css