0

我是前端编程的新手。我已将应用程序的后端制作为 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 位）。

在过去的两天里，我一直在努力解决这个问题，任何帮助将不胜感激。

谢谢

4

1 回答 1

1

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

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

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

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

于 2017-11-22T22:09:47.773 回答