html - 使用 overflow-x : auto;"时，有没有办法在我的表格和滚动条之间放置一个空格

Question

我有一个像这样的简单表格:

<div id="table-overflow">
   <div>
      <table>
         ...
         ...
      </table>
   </div>
</div>

    #table-overflow {
        position: absolute;
        top: 10rem;
        right: 3rem;
        left: 3rem;
        bottom: 2rem;
        display: block;
        overflow-x: auto;
    }

当有很多行和列时，滚动条会按预期出现。当宽度大于表格时，我会在右侧看到一个垂直滚动条，表格数据会一直上升到该滚动条。有什么方法可以在不使用 jQuery 滚动条插件的情况下在垂直滚动条左侧和水平滚动条上方留出空间吗？

我想看到的是这样的:

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx v
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx v
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx v
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx v

hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh

其中v是垂直滚动条，h是水平滚动条，x是数据

Answer 1

好吧，我有一些解决方案:

HTML:

<div id="table-overflow">
  <div class="screen">
    <div class="right"></div>
    <div class="bottom"></div>
  </div>

  <div class="table">
    <div>
      <table>
        <tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td></tr>
        <tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx1</td></tr>
        <tr><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx1</td></tr>
      </table>
      <div class="fix-right"></div>
    </div>
  </div>
</div>

CSS:

#table-overflow {
  position: absolute;
  top: 10rem;
  right: 3rem;
  left: 3rem;
  bottom: 2rem;
  display: block;
  padding-right: 21px;
  padding-bottom: 21px;
}

#table-overflow > div.table {
  position: absolute;
  overflow: scroll;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9;
  padding: 0 10px 8px 0;
}

#table-overflow > div.table > div {
  white-space: nowrap;
}

#table-overflow > div.table table {
  display: inline-block;
}

#table-overflow > div.table div.fix-right {
  display: inline-block;
  width: 10px;
  height: 10px;
}

div.screen {
  position: absolute;
  left: 0;
  top: 0;
  right: 21px;
  bottom: 21px;
}

div.right {
  background: red;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 10px;
  z-index: 10;
}

div.bottom {
  background: red;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  z-index: 10;
}

参见 http://jsbin.com/OGuHagaz/3/edit?html,css,output了解详情(仅在 Chrome 中测试)。

想法是:创建了 2 个 div，它们绝对定位在表格上方显示的屏幕上，并且这个“屏幕”不包括滚动条占据的底部和右侧的 21px。

然后在其上放置两个 div:“bottom”和“right”，它们具有您希望的高度和宽度。我设置了红色背景，以更易于理解的方式显示其工作原理。

“fix-right”和 div.“table”也解决了通过填充(对于底线)和“fix-right”宽度(对于右线)在屏幕下滚动的问题。

不幸的是，这种方法有两个问题:

1. 不适用于“overflow: auto”，但适用于“overflow: scroll”，至少在某些 JavaScript 中无法检测表格宽度是否大于容器 div。此外，如果要更改大小，您可能应该跟踪事件“调整大小”，然后更改 css 中的一些数字
2. 在不同的浏览器中，滚动条的宽度可能不同:请考虑到这一点

希望对你有帮助。