CODEWITHSUNDEEP
htmlcsswidthpercentage
Arthur Corenzan
Arthur Corenzan

Reputation: 911

How table-cell width with percentage value works?

I think it's better illustrated...

Assume our HTML:

<div>What the hack ?</div>

And our CSS:

div {
  width: 100%;
  display: table-cell;
  background: pink;
}

You'll notice that the <div>'s width is behaving like a floating element: it's as large as its content instead of stretching to both sides.

Now start decrementing the width and suddenly you'll see the <div> growing.

Here's a interactive demo:

http://dabblet.com/gist/9891801

Why is that ? How does it work ?

Upvotes: 0

Views: 1052

Answers (2)

oliveiraev
oliveiraev

Reputation: 56

Here's the Math:

table-cell's width on 100% means that you have a table with a single cell per row. The known width - in your case - is the width of the text (89px).

If we put table-cell's width at 50%, that means the cell is wider as half of the whole table's width. We double the known width going to 178px.

Conclusion, the end width will be 100 / {table-cell's width} * {element's offsetWidth}

Why this happens is explained with the already posted link http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes

Upvotes: 2

user1877745
user1877745

Reputation:

Do you really need display: table-cell; property ??

If you removed the div works good!

But If you want an explication just see this

Upvotes: 0

Related Questions