如何解决Firefox浏览器中表格右侧padding不生效的问题

在Chrome中，设置了overflow-x: scroll的容器添加padding后，表格右侧的padding能正常显示，但在Firefox里这个右侧padding完全不生效，该怎么处理？

原始代码示例 #

CSS

table td {
  border: 1px solid black;
  white-space: nowrap;
}

div {
 overflow-x: scroll;
 width: 175px;
 border: 1px solid blue;
 padding: 20px;
}

HTML

<div>
  <table>
    <tbody>
      <tr>
        <td>Column 1</td>
        <td>Column 2 why no padding on right in Firefox?</td>
      </tr>
    </tbody>
  </table>
</div>

可行解决方案 #

由于原本容纳表格的容器就使用了flexbox，我们可以通过在容器内添加左右固定宽度的spacer元素来模拟padding效果，这个方案在Firefox和Chrome中都能正常生效。

解决方案代码

CSS

table td {
  border: 1px solid black;
  white-space: nowrap;
}

div.flexrow {
 display: flex;
 flexflow: row nowrap;
 overflow-x: scroll;
 width: 175px;
 border: 1px solid blue;
 padding: 20px 0;
}

div.spacer {
  flex: 0 0 20px;
}

HTML

<div class="flexrow">
  <div class="spacer"></div>
  <div class="content">
    <table>
      <tbody>
        <tr>
          <td>Column 1</td>
          <td>Column 2 why no padding on right in Firefox?</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="spacer"></div>
</div>

内容的提问来源于stack exchange，提问作者Gary