Как сделать горизонтальную линейку прокрутки div, как фиксированный CSS div

Question

Я пытаюсь найти решение для отображения очень широких и длинных таблиц. Мой верхний и нижний колонтитулы фиксируются с помощью стиля CSS position: fixed;, где мой контейнер является гибким, чтобы содержать любое количество данных. Ниже приведен макет страницы.

---

Заголовок

---

Контейнер ДИВ

Моя таблица

Конец DIV

---

Footer

---

Я сделал мой контейнер div горизонтально прокручиваемым, но чтобы найти полосу прокрутки, мне нужно прокрутить вниз до конца всей страницы или таблицы в моем контексте.

Так или иначе, я могу сделать свою полосу прокрутки незадолго до окончания окна браузера или, другими словами, зафиксировать ее так же, как мой верхний и нижний колонтитулы, так что мне не нужно прокручивать весь страницу для просмотра моих данных таблицы.

Я ценю, если вы можете оказать мне любую помощь.

EDIT Вот изображения для вашей помощи

изображений перед прокруткой

изображения после прокрутки вниз

Answer 1

header { 
 
    top: 0; 
 
} 
 

 
footer { 
 
    bottom: 0; 
 
} 
 

 
header, footer { 
 
    position: fixed; 
 
    background: tomato; 
 
    width: 100%; 
 
    color: white; 
 
    height: 20px; 
 
    text-align: center; 
 
} 
 

 
div { 
 
    position: fixed; 
 
    top: 20px; 
 
    overflow: auto; 
 
    bottom: 20px; 
 
    width: 100%; 
 
} 
 

 
td { 
 
    white-space:nowrap; 
 
} 
 

 
table { 
 
    border-collapse:collapse; 
 
} 
 

 
td { 
 
    border: 1px solid black; 
 
}

<header> 
 
    The Header 
 
</header> 
 

 
<div> 
 
    <table> 
 
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr> 
 
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr> 
 
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr> 
 
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr> 
 
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr> 
 
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr> 
 
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr> 
 
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr> 
 
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr> 
 
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr> 
 
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr> 
 
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr> 
 
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr> 
 
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr> 
 
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr> 
 
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr> 
 
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr> 
 
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr> 
 
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr> 
 
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr> 
 
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr> 
 
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr> 
 
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr> 
 
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr> 
 
    </table> 
 
</div> 
 

 
<footer> 
 
    The Footer 
 
</footer>

Answer 2

Вы можете попробовать установить он от стола до общей высоты окна, так что при посадке ваша страница состоит из div с горизонтальной и вертикальной полосой прокрутки. Сделать что-то вроде Див width:100%; height: 780px; (высота моего окна)