我是前端编程的新手。我已经将应用程序的后端制作为 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 天我一直在努力解决这个问题，非常感谢任何帮助。
谢谢
最佳答案
只需在要防止溢出的列上放置一个 .table-holder 并声明以下规则:
.table-holder {
overflow-x:auto;
}
这将使您的列在其内容的宽度超过其自身宽度时可水平滚动。我假设这就是你想要的，虽然我知道你只指定了问题是什么，而不是你希望如何处理它。如果这不是您想要的，您可能应该澄清一下。
如果不是很明显，你可以使用任何你想要的类名，table-holder 只是我给它起的名字，因为我希望能够弄清楚事情是做什么的即使我在很长很长时间后返回一个元素，不记得我在那里做过什么。
关于html - 响应式 div 元素内的表格(导致调整窗口重叠)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47444196/