Firefox 显示不必要的水平滚动条

Question

我想要达到的效果是这样的：我想要一行带有标题的文本，在它下面我想要一个表格。 该表格可能太高而无法放入浏览器窗口，因此如有必要，我想要一个垂直滚动条。 表格不应太宽，因此不需要水平滚动条（但我仍然希望在必要时显示它）。 无论哪种方式，我都不希望标题滚动； 因此，出现一个垂直滚动条，我滚动表格，标题应该是固定的。 我正在尝试设置一个<div>其宽度是浏览器决定显示表格所需的任何宽度（标题的宽度将小于该宽度）。

这是我尝试过的：

<html>
   <head>
      <title>Page title</title>
      <style type="text/css">
         .mytab { border-style: solid; border-collapse: collapse }
         table.mytab td { border-style: solid; border-width : 1px;
                           padding: 5px }
      </style>
   </head>
   <body>
      <div style="display: inline-table">
          <div style="padding-bottom: 10px; text-align: center">Table title</div>
          <div style="height: 100px; overflow: auto">
              <table class="mytab">
              <tr><th/><th>Data1</th><th>Data2</th><th>Data3</th></tr>
                  <tr><td>AAAA</td><td>12348173</td><td>7598734</td><td>zioxuoiuf</td></tr>
                  <tr><td>BBBB</td><td>29834782</td><td>7895232</td><td>kuoiu2kjf</td></tr>
                  <tr><td>CCCC</td><td>98291123</td><td>io242o2</td><td>982734211</td></tr>
              </table>
          </div>
          </div>
   </body>
</html>

（我最终希望表格的高度超过 100 像素，但我设置了它以便我可以测试滚动条。）

这在 Chrome (53.0.2785.116 m) 中实现了我想要的，但在 Firefox (49.0.1) 中没有。 在 Chrome 中，浏览器似乎会计算出表格的宽度，然后在其右侧添加一个垂直滚动条。 在Firefox中，它出现在浏览器计算出有多宽，使表，但随后该定位宽度的盒子内的垂直滚动条，模糊表的一部分。 然后它会附加一个水平滚动条，因为您无法看到所有表格。

与 Chrome 的外观：

Firefox 外观：

（对我来说，Firefox 在垂直方向上显示较少的表格并不重要。但我绝对不希望水平滚动条出现，除非有必要。）

我该如何解决这个问题，让它在 Firefox 中工作？

Answer 1

我们在这里的工作中经常遇到这个问题。 似乎 Mozilla 的呈现方式与 Chrome 不同。

通过检查，我能够通过向包含表格的最里面的<div>添加 16 像素的右填充来解决格式问题。 正如您可以自己验证的那样，这有效地为垂直滚动条增加了足够的空间，从而不会出现水平滚动条。

唯一的问题是这会将滚动条在 Chrome 中向右推得太远。 所以我在 CSS 中添加了一个检查以将样式仅应用于 Mozilla 浏览器。 我在 Chrome 和 Mozilla 中进行了测试，看起来不错。

<style type="text/css">
     .mytab { border-style: solid; border-collapse: collapse }
     table.mytab td { border-style: solid; border-width : 1px;
                       padding: 5px }
     @-moz-document url-prefix() {
         .moz-div { padding-right: 16px; }
     }
</style>


<div class="moz-div" style="height: 100px; overflow: auto">

顺便说一下，Mozilla 中的问题也出现在 IE（至少 IE 10）中，因此您应该检查所有浏览器和设备，并相应地更新您的 CSS。

Answer 2

不理想，但这里有一个更简单的选项，在大多数情况下可能已经足够好了。

div {
  overflow-x: hidden;
}

th:last-child,
td:last-child {
  padding-right: 16px;
}