Question

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

我正在使用Tachyons CSS库，因为我希望它可以更轻松地设计布局。

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

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

请注意，由于某些原因，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位）。

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

由于

Answer 1

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

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

当内容的宽度超出其自身宽度时，这将使您的列可水平滚动。我假设这是你想要的，虽然我意识到你只指出了问题所在，而不是你喜欢它的处理方式。如果那不是你想要的，你应该澄清一下。

如果不明显，你可以使用你想要的任何类名，table-holder只是我给它的名字，因为我希望能够找出什么东西即使我经过很长很长一段时间回到项目中，也不记得我在那里做过的任何事情。

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

1 个答案: