CODEWITHSUNDEEP
css
Alan L
Alan L

Reputation: 2015

Why isn't <body> expanding to fit its contents?

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?

Upvotes: 15

Views: 9047

Answers (5)

G-Cyrillus
G-Cyrillus

Reputation: 105853

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 :

Edit nowdays, min-width:max-content would do . http://jsfiddle.net/bj4wk6m2/

Upvotes: 18

Rudie
Rudie

Reputation: 53781

It's very strange that the simplest solution hasn't been mentioned:

body {
  width: fit-content;
  min-width: 100%; /* because the content might only be a few words */
  box-sizing: border-box; /* because 100% + padding > 100% */
}

Unfortunately that doesn't work everywhere and it still requires prefixing. In Chrome (with Blink these days) that would be: -webkit-fit-content (-webkit- in Blink, weird).

Upvotes: 9

Mathijs Flietstra
Mathijs Flietstra

Reputation: 12974

CSS isn't broken, the behaviour you are seeing is by design.

Some quotes from the link above:

The following constraints must hold among the used values of the other properties:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

..

If 'width' is set to 'auto', any other 'auto' values become '0' and 'width' follows from the resulting equality.

From this I understand that block level elements have a default width of 100% of their containing block if all of the other properties are not set.

<body> is by default a block level element.

You could set float: left; or display: inline-block on body and it will grow with its content.

Here's a jsFiddle.

To answer question 2 (to get the result of the accepted answer without resorting to setting display: table on an element which isn't a table), you could do it this way:

CSS:

html {
    padding: 10px;
}
html, body {
    margin: 0px;
}
body {
    border: 2px solid blue;
    display: inline-block;
    min-width: 100%;
    box-sizing: border-box;
}
table, p {
    background-color: cyan;
}

Here's a jsFiddle.

Upvotes: 5

Mirage
Mirage

Reputation: 45

The way you have used tr and td tags, the data in table is bound to overflow.

You have to decide how many rows and colmuns your table should have, when you are using simple html table. just put tr and td tags accordingly, and then you are done.http://jsfiddle.net/6REkj/Fiddle

Upvotes: -1

maja
maja

Reputation: 18034

The only solution for this is to have a vertical scrollbar. It can be achieved with an additional div, wrapping the table.

This would be the css:

body { border: 2px solid blue; }
table, p { background-color: cyan; width: 100%; word-wrap:break-word;}
div { width: 100%; overflow-x: auto;}

If you would only have the p-Tag, the attribute word-wrap:break-word; helps. You can also move the paragraph outside the div, which allows you to see the whole content without scrolling.

See the fiddle for a working sulution:

http://jsfiddle.net/WrbpJ/

If you prefer scrolling the whole page, and not only the div, this can be used:

body { border: 2px solid blue; display: table;}

See http://jsfiddle.net/sGH4t/

If you don't want the scrollbar at all, you'll have to use lists or divs instead of a table.

Upvotes: 0

Related Questions