Есть ли способ разместить пространство между моим столом и полосами прокрутки при использовании 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 - данные

ОТВЕТЫ

Ответ 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 divs, которые абсолютно расположены на экране, который показан над таблицей, и этот "экран" исключает 21px снизу и справа, которые берутся полосами прокрутки.

Затем на нем размещены два divs: "bottom" и "right", которые имеют высоту и ширину вашего желания. Я установил красный фон, чтобы показать более понятным образом, как это работает.

Также "fix-right" и div. "table" фиксируют проблему прокрутки под экраном путем заполнения (для нижней строки) и ширины "fix-right" (для правой строки).

К сожалению, этот метод имеет две проблемы:

  • не работает для "переполнения: авто", но для "переполнения: прокрутка", по крайней мере, так, как он не адаптирован с некоторым JavaScript, чтобы определить, больше ли ширина таблицы, чем контейнер div. Кроме того, если размер будет изменен, возможно, вы должны отслеживать событие "изменить размер", а затем изменить некоторые цифры в css
  • в разных браузерах ширина полосы прокрутки может различаться: учтите это

Надеюсь, это поможет вам.

Ответ 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, создавая промежуток. Это приводит к следующим ограничениям:

  • Если что-либо в таблице нужно щелкнуть, оно не может быть (может быть самым большим убийцей).
  • В таблице прокрутки всегда есть лишнее количество, которое просто "потерянное пространство" справа и внизу (здесь 26px).
  • Красивые граничные рамки на столе будут сложными (если не невозможными, чтобы действительно получиться), если это нужно.
  • Для этого нужен сплошной цвет фона.

С некоторыми творческими реализациями javascript некоторые из этих вещей могут быть сведены к минимуму в их отрицательных эффектах (изменение размера смещения на основе состояния переполнения или нет).

Ответ 3

#table-overflow {
    padding: 20px;
}

или

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

Зависит от вашего макета и как вы хотите, чтобы он выглядел.

Поскольку я не получил ответа, см. его здесь: http://jsfiddle.net/MDgb9/

И большая версия здесь: http://jsfiddle.net/MDgb9/2/

Ответ 4

Извините, я все думал об этом в первую попытку...

Я думаю, что вы можете получить желаемый вид с небольшим отступом и теней в коробке... Его очень похоже на подход ScottS, его немного более упрощен и использует свойство указателя-событий, чтобы решить проблему с событиями мыши в таблице.

Рабочий пример

#table-overflow {
    pointer-events: none; /* allow pointer events to pass through */
    position: absolute;
    top: 10rem;
    right: 3rem;
    left: 3rem;
    bottom: 2rem;
    display: block;
    overflow-x: auto;
    box-shadow: -30px -30px blue inset;
}
table {
    pointer-events: auto; /* reset the pointer-event property to handle inheritance */
    padding:0px 20px 20px 0px;
    position:relative;
    z-index: -1; /* places the table beneath #table-overflow */
}

<div id="table-overflow">
    <table>
        <tr>
            <td>XXXXXXXXXXXX...

Ответ 5

попробуйте установить для него border cellpadding и cellspacing.

<table border="2" cellpadding="20" cellspacing="20">