Is there a way I can place a space between my table and scrollbars when using overflow-x: auto;"

css, html

Solution

Well, I've got some solution:

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;
}

See http://jsbin.com/OGuHagaz/3/edit?html,css,output for details (tested only in Chrome).

The idea is: there are created 2 divs which are absolutely positioned on the screen which is shown above the table, and this "screen" excludes 21px from bottom and right which are taken by scrollbars.

Then on it there are placed two divs: "bottom" and "right" which have height and width of your wish. I set up background red to show in more understandable way how it works.

Also "fix-right" and div."table" are fixing the problem of scrolling under the screen by padding (for bottom line) and "fix-right" width (for right line).

Unfortunately, this method has two problems:

- not working for "overflow: auto" but for "overflow: scroll", at least in the way it is not adapted with some JavaScript to detect if the width of table is greater than container div. Also, if the size is going to be changed, probably you should track for event "resize" and then change some numbers in css

- in different browsers the width of a scrollbar can differ: take this into account

Hope this helps you.

Problem

I have a simple table like this: ``` <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; } ``` When there are many rows and columns then scrollbars appear as expected. When the width is more than the table I see a vertical scrollbar on the right and the table data goes right up to this scrollbar. Is there some way I can have a space to the left of the vertical scroll bar and a space above the horizontal scrollbar without using a jQuery scrollbar plugin? What I would like to see is something like this: ``` xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx v xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx v xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx v xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx v hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh ``` Where v is the vertical scrollbar, h is the horizontal scrollbar and x is the data

Original source