有没有办法在使用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中测试).

这个想法是:创建了两个div,它们绝对位于屏幕上,显示在表格上方,这个"屏幕"从底部和右侧排除21px,由滚动条拍摄.

然后在它上面放置两个div:"bottom"和"right",它们具有你想要的高度和宽度.我设置背景红色以更加可理解的方式显示它是如何工作的.

另外"fix-right"和div."table"通过填充(用于底线)和"fix-right"宽度(用于右线)来解决在屏幕下滚动的问题.

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

1. 不适用于"overflow:auto"但是对于"overflow:scroll",至少在它不适合某些JavaScript的方式来检测表的宽度是否大于容器div.此外,如果要更改大小,可能您应该跟踪事件"调整大小",然后更改css中的一些数字
2. 在不同的浏览器中,滚动条的宽度可以不同:将此考虑在内

希望这对你有所帮助.