Why isn't <body> expanding to fit its contents?
css
Solution
if you set `display:table;` to `body` or `html`, it will allow to grow its width over the 100% of viewport. it will just expand like a `table` does :)
html {display:table;width:100%; /* need to set a width to 100%, wich means here a min-width since it is displayed with the same specifities thas has a table , it shrinks and expand according to its content */}
http://jsfiddle.net/6REkj/1/
other options :
- `display:inline-block;min-width:100%;` on `body` : http://jsfiddle.net/6REkj/3/
- `position:absolute;min-width:100%;` on `html` : http://jsfiddle.net/6REkj/4/
Edit nowdays, `min-width:max-content` would do . http://jsfiddle.net/bj4wk6m2/
Problem
I have a table that extends off the edge of the screen, but the body only gets as wide as the screen, causing the table to overflow it. Demo: http://jsfiddle.net/6REkj/ ``` <html> <head> <style> table { background-color: lime; } body { border: 2px solid blue; } </style> </head> <body> <table> <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr> </table> </body> </html> ``` This is one of those things that make me think CSS is broken. I thought containing elements were supposed to expand to fit their contents. Question 1: Why is it doing that? Question 2: What should I do to get a margin between the table and the right edge of the page?