在使用overflow: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，它们绝对定位在显示在表上方的屏幕上，而这个“屏幕”从底部和右边排除了由滚动条获取的21 by。

然后在上面放了两个div：“底部”和“右”，它们有你的愿望的高度和宽度。我设置了背景红色，以更容易理解的方式展示它的工作原理。

此外，“修正-右”和div.“表”通过填充(用于底线)和“固定-右”宽度(用于右行)来解决屏幕下滚动的问题。

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

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

希望这能帮到你。

Answer 2

工程，但有后果

看这把小提琴 (调整大小以滚动或不滚动以查看效果)。它使用以下CSS：

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

#table-overflow > div {
    height: 100%;
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow-x: auto;
}
#table-overflow > div:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1; /*allow scroll bars to show */
/* the following hides table to create gap 
   10px is approx. desired gap
   16px is approx. scroll bar size
   approximations will work fine cross broswers
*/
border-right: 26px solid white; 
border-bottom: 26px solid white;
}
#table-overflow > div > table {
    position: relative;
    z-index: -1; /* push table below #table-overflow > div:after */
    /*The following = border width for hiding,
      10px is needed for full scroll to offset "gap"
      16px is needed for full visibility of table 
      when no scroll bars are needed
    */
    padding-right: 26px; 
    padding-bottom: 26px;
}

问题是，css无法知道某物是否处于溢出状态(否则我们可以调整事物以更好地工作)。因此，这个解决方案必须包含一个恒定的底部和右侧间隔(无论是否处于溢出状态)。此外，它还必须将table推到:after元素后面，从而造成差距。这导致以下限制：

1. 如果需要单击表中的任何内容，则不可能(可能是最大的杀手)。
2. 滚动表中总是有额外的量，这只是在右边和底部“浪费空间”(这里是26px)。
3. 如果需要的话，桌面上漂亮的边框是很有挑战性的(如果不是不可能的话)。
4. 一个坚实的颜色背景是需要它看起来很好。

有了一些创造性的javascript实现，可以将其中一些事情的负面影响降到最低(根据溢出状态调整偏移量大小)。

Answer 3

#table-overflow {
    padding: 20px;
}

或

#table-overflow table {
    padding: 20px;
}

取决于您的布局和您希望它的外观。

由于我没有得到答复，请看这里：http://jsfiddle.net/MDgb9/

更大的版本是：http://jsfiddle.net/MDgb9/2/