CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
George Krialashvili
George Krialashvili

Reputation: 41

Cant make container overflow-x scrollable

I have a table container that I want it to be scrollable on a smaller resolution, but I am missing something that won't let me do it. I'll provide CodePen code below. .overflow-scroll__mobile this class to be scrollable overflow-x.

@media screen and (max-width: 768px) {
    .overflow-scroll__mobile {
    min-width: 800px;
    width: 100%;
    overflow-x: scroll;
  }
}
<div class="overflow-scroll__mobile">
    <table class="table transactions-history-table">
    </table>
</div>

CODE: https://codepen.io/gkrialashvili/pen/eYWKwRQ

Upvotes: 0

Views: 804

Answers (1)

Maria Nirmal
Maria Nirmal

Reputation: 383

Table always adjusts to the width of the page unless you specify a width.

The overflow-x will only force show the scrollbar when there is nothing overflowing the within the parent div.

Set a min-width to the table to an appropriate value (say 640px) and max-width of the container div to equal or less than page width(<=100vw) then your container will automatically have the horizontal scroll without needing to force overflow-x. You can't use percentage(say 100%) as it would set the div to its contents min width.

Upvotes: 1

Related Questions