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>

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

这是我想要的Chrome（53.0.2785.116米），但不是在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;
}

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

2 个答案: