How do I stop this div's width from decreasing?


Tags: html,css,scroll,resize,overflow

Problem :

I have an HTML table inside of a div. I would like the div's width to be able to decrease dynamically without any of its contents being wrapped and without the height increasing. Instead, I would just like to have a horizontal scroll bar, and no vertical scroll bar.

Here is my JSFiddle demo (Please don't mind the messy HTML - it was generated using ASP .NET MVC Razor).

You can see by my CSS that I tried using overflow-x: scroll on the outer div, but it didn't quite do the trick.

Please let me know how I can stop the div's contents from resizing. Thanks.

EDIT: The contents of the table inside the div are dynamic, so hard coded widths won't work here.



Solution :

As you said, you don't want the content of the table to be wrapped so you can use something like this:

#container table * {
    white-space: nowrap;
}

And I think you don't need overflow-x: scroll; you can use overflow-x: auto; and overflow will only appear when necessary.


    CSS Howto..

    CSS: how to align text content horizontally-centered and vertically-centered?

    How to explain using browser.sleep in protractor

    How do I differentiate between IE versions 6 to 10 using IE CSS Hacks?

    When using ''@keyframe play'' in css, how can you get the frame the animation is currently at with javascript?

    how to center an item when it's the only one in a multi-column layout

    Slideshow picture disapears

    How to include LESS files in web page using Web Essentials?

    How to display element on screen but not at the top of the screen in html/css?

    How to place inline-block divs one per line with CSS? [closed]

    How to hide a div off the viewport responsively, and always showing the bottom 50px?

    How to create these boxes with CSS and HTML [closed]

    How could I get a layout like the one shown in the attached image? [closed]

    Adding bootstrap tooltip modifies the style of the element itself - how do I stop this happening?

    How to add Bootstrap to Fullpage.js

    How do I constraint an animation using only CSS and HTML?

    how to use jquery to add css based on screen width

    How to change the background colour's opacity in CSS [duplicate]

    How to make a sliding dashboard similar to medium.com? [closed]

    How to keep divs position fixed even after deleting its neighbors?

    How prevent Conflict between two $(this) in jquery?

    how to select a Div ID that does not have a specifc class/es

    How can I create a postage stamp border?

    How to make div height 100% inside relative div?

    How can I find out what CSS is needed to implement twitter Bootstraps Modal. [closed]

    How to start css and html

    How do I get the name of div a user must click to appear in a text div?

    How can i learn CSS easily?

    CSS element class - Height differs based on content, how to fix?

    How do I animate this box to have a pop out effect?

    how to display background color in outlook 2010 html email?