I created a view (from Views module) where I display my content in a table.
The table contains about 22 columns:
The table continue to the right of the screen (see screenshot above). How to fix that? (fit it to view boundaries or make the view area wider)
I would recommend using the FooTable Views plugin. I've used it before and it's quite helpful when dealing with responsiveness and smaller content areas.
My suggestion would be to check that you have this set in your CSS:
table{
width: 100%;
}
If you do, check it is not being overridden. Maybe you could add a bit more context or CSS code to your question so we can understand what's going on a bit better.
I've seen this type of issue in other view instances. For example, lets say you have photos your laying on a sidebar of a width of 250 px. If the image styles you choose are bigger than the set width of 250px, then view will override that 250px setting. Thus the view will bleed over the edge like in your case. So what I recommend is looking/matching the width of the grid your setting the view in and add a horizontal overflow scroll via css :#block-views-*your_view_name*-block {
width: 960px;
overflow-x: scroll;
}
Also a reminder that if your using responsive design, then you need to use @media queries with the CSS above for EACH of your sizes: mobile, 720, 960 etc...
