CODEWITHSUNDEEP
htmlcss
chamathabeysinghe
chamathabeysinghe

Reputation: 868

HTML/CSS add a horizontal scrollbar at bottom of the page

I have a web page with large table full screen. Number of rows are fixed at 20. And it should be scroll-able horizontally. Currently I use overflow feature to get the horizontal scroll bar.

 overflow: 'hidden', overflowX: 'scroll',

But then I need to scroll down to see the horizontal scroll bar. I want scroll bar fixed at the bottom of the page. So it is always visible and user can easily navigate the table. Please see below image for example. How can I add such scroll bar?

enter image description here

PS: I am using react-semantic-ui

Upvotes: 1

Views: 6677

Answers (1)

Christopher Vickers
Christopher Vickers

Reputation: 1953

Just place a div inside your div. As long as the child div has its width set it will overflow and the scroll bar will appear I think this is what you want. If you need to set the height of the outer one then use the height:100vh so set the outer div to be the height of the viewport.

Hope that helps.

<div style="overflow-x: scroll; overflow-y: scroll; height: 150px; ">
  <div style="width: 800px; background-color: blue;">

    <br/>Test test test Test test test Test test test Test test test Test test test Test test test Test test test Test test test Test test test Test test test Test test test Test test test Test test test Test test test Test test test Test test test Test test test 
    <br/>Test
    <br/>Test 
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
  </div>
</div>

Upvotes: 1

Related Questions