html – 有一种方法,我可以在我的表和滚动条之间使用overflow-x：auto;“

我有一个这样的简单的表：

<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是数据

解决方法

那我有一些解决方案：

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,output(仅在Chrome中测试).

这个想法是：创建了2个div,它们绝对位于桌子上方的屏幕上,而这个“屏幕”不包括由滚动条拍摄的底部和右侧的21px.

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

另外“fix-right”和div.“table”正在通过填充(底线)和“修正右”宽度(右侧)修正屏幕下方的滚动问题.

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

>不适用于“overflow：auto”,而对于“overflow：scroll”而言,至少在不适应某些JavaScript的情况下检测表的宽度是否大于container div.另外,如果要改变大小,大概你应该跟踪事件“调整大小”,然后在css中改变一些数字
>在不同的浏览器中,滚动条的宽度可以不同：考虑到这一点

希望这可以帮助你.

html – 有一种方法,我可以在我的表和滚动条之间使用overflow-x：auto;“

解决方法

猜你在找的HTML相关文章