Div with horizontal scrolling only

by

The solution is fairly straight forward. To ensure that we don’t impact the width of the cells in the table, we’ll turn off white-space. To ensure we get a horizontal scroll bar, we’ll turn on overflow-x. And that’s pretty much it:

.container {
    width: 30em;
    overflow-x: auto;
    white-space: nowrap;
}

You can see the end-result here, or in the animation below. If the table determines the height of your container, you should not need to explicitly set overflow-y to hidden. But understand that is also an option.

enter image description here

More Related Contents:

  1. Hide scroll bar, but while still being able to scroll
  2. css ‘pointer-events’ property alternative for IE
  3. flex container min-height ignored in IE
  4. CSS-Only Scrollable Table with fixed headers [duplicate]
  5. Select dropdown with fixed width cutting off content in IE
  6. Tools to selectively Copy HTML+CSS+JS From A Specific Element of DOM [closed]
  7. Flexbox alternative for IE9
  8. Div 100% height works on Firefox but not in IE
  9. How to change color of disabled html controls in IE8 using css
  10. Flexbox column-reverse in Firefox, Edge and IE
  11. How to hide drop down arrow in IE8 & IE9?
  12. Internet Explorer 11 word wrap is not working
  13. What is haslayout?
  14. Blank iFrame in IE
  15. @font-face not working with specific version of Internet Explorer 11
  16. Internet Explorer and clip-path
  17. Will targeting IE8 with conditional comments work?
  18. How to get horizontal scroll bar in select box in IE?
  19. Specific order of inline-block elements on mobile and desktop devices
  20. How to make moving CSS objects like this?
  21. Why doesn’t height: 100% work to expand divs to the screen height?
  22. Proper use of flex properties when nesting flex containers
  23. Applying a background to and/or
  24. How to blur(css) div without blur child element [duplicate]
  25. Create a responsive navbar sidebar “drawer” in Bootstrap?
  26. CSS3 transition doesn’t work with display property [duplicate]
  27. How can I show three columns per row?
  28. Media queries not working inside an iframe
  29. bootstrap 4: center inline form inside a jumbotron
  30. How do I style radio buttons with images – laughing smiley for good, sad smiley for bad?

Leave a Comment