Table cell box model: extra width and height

HTML & CSS
1

Here’s the table cell: https://developers.google.com/+/web/share/#sharelink-sizes

As you see when you use the inspect element feature in Chrome or Firefox, the total width and height of the table cell is calculated as 105px × 85px. However, the cell content (image) is only 64px × 64px and the cell padding is 6px 10px 6px 10px. I don’t see any width and height properties in the element style, so where does this extra width and height come from?

2

From CSS apparently:

body.docs table th, body.docs table td {
padding: 6px 10px;
}

screen-docs.css line 1 (probably minified, I copied this out of Opera dragonfly)

3

Hi,

I may have misunderstood the question but table cells are distributed across the width of the table in a best fit approach for the content that is seen. It doesn’t shrink wrap all content when the table is at 100% width because the table would no longer be 100% wide then.

You could force the issue by setting a width on that column (put a width on the th for that column) and then the browser will obey that width as long as it fits in with the other cells otherwise the browser will adjust accordingly. Or you could use the table-layout fixed property/value and then size each of the columns exactly as you want (as long as they again add up to the total available space).

4

Ah, no, I’m the one who misunderstood the question!