I have this example: /

 <div class="container-fluid pt-1 pb-1 mb-3 header-section"> Header Section </div>
 <div class="container-fluid content-section">      
   <div class="row">
     <div class="col-12">Filter Section</div>              
   </div>
   
    <div class="row">
       <div class="col-12">
         <div class="test-table"></div>       
       </div>
     </div> 
 </div>   
</div>
<footer>Footer Section</footer>

Where is a simple page using vue and bootstrap 5. In this example there is a lot of data and the table fills the page down (as supposed). If you want to use the horizontal scroll you have to scroll vertically until you reach down then use the horizontal scrollbar which is annoying.

So I want to change that by disabling the vertical scroll for the page, and apply it only for the table (when there is a lot of data). So the idea is when the table has a lot of data to expand until reach the footer (to be able to use the horizontal scrollbar).

Like this:

How can I change the layout to be able to do that?

I have this example: https://jsfiddle/xcugq7d1/

 <div class="container-fluid pt-1 pb-1 mb-3 header-section"> Header Section </div>
 <div class="container-fluid content-section">      
   <div class="row">
     <div class="col-12">Filter Section</div>              
   </div>
   
    <div class="row">
       <div class="col-12">
         <div class="test-table"></div>       
       </div>
     </div> 
 </div>   
</div>
<footer>Footer Section</footer>

Where is a simple page using vue and bootstrap 5. In this example there is a lot of data and the table fills the page down (as supposed). If you want to use the horizontal scroll you have to scroll vertically until you reach down then use the horizontal scrollbar which is annoying.

So I want to change that by disabling the vertical scroll for the page, and apply it only for the table (when there is a lot of data). So the idea is when the table has a lot of data to expand until reach the footer (to be able to use the horizontal scrollbar).

Like this:

How can I change the layout to be able to do that?

• html
• css
• twitter-bootstrap

Share Improve this question Follow asked Mar 21 at 12:35 calin24calin24 99144 gold badges2424 silver badges4949 bronze badges 6

• You don't have to go all the way down to the footer to scroll horizontally -- just use the arrow keys. – zer00ne Commented Mar 21 at 12:48
• Move the footer into the flex wrapper element, and stop positioning it sticky. Then make the wrapper take 100vh height, and apply flex-shrink: 1 and overflow: auto to .content-section. jsfiddle/qbaptvef – C3roe Commented Mar 21 at 13:16
• @C3roe ok, but if there is no data in the table or less the footer goes up ... – calin24 Commented Mar 21 at 13:32
• 1 Then allow the element not only to shrink if necessary - but also grow as well if necessary. jsfiddle/oj10yt53 – C3roe Commented Mar 21 at 13:35
• @C3roe can the scrollbar be applied only to the table so the filter section is not affected? – calin24 Commented Mar 21 at 14:38

 |  Show 1 more comment

1 Answer 1

Sorted by: Reset to default 0

just change the overflow-x to scrollbar in .test-table css and it will work fine.