Reputation: 35735
I have a very simple table:
<table>
<tbody>
<tr>
<!-- NOTE: min-width is just to make the td's outline more visible -->
<td style="border: 1px dotted blue; min-width:130px;">
<span style="padding: 50px; background:red">x</span>
</td>
</tr>
</tbody>
</table>
However, I'm confused by what it produces. I would have expected the <td>
to grow to the size of its contents, giving me a blue dotted line surrounding a big block of red.
That doesn't happen though. Instead, the row's height remains fixed (as you can see by looking at the blue line), and the inner <span>
spills out past the <td>
, without changing it.
Clearly I'm misunderstanding how table cells grow, as I thought they would always expand to fit their contents (unless I use, say, overflow: hidden
). Can anyone please explain:
<td>
isn't growing to encompass its <span>
?P.S. I did try searching for an answer to this, but all I could find was people trying not to have their <td>
grow (implying that, by default, they do grow).
Upvotes: 1
Views: 1486
Reputation: 78796
I think the problem is the inline level element <span>
+ padding
. If you set it to span { display: block; }
, it will then all work as expected.
span { display: block; }
<table>
<tbody>
<tr>
<!-- NOTE: min-width is just to make the td's outline more visible -->
<td style="border: 1px dotted blue; min-width:130px;">
<span style="padding: 50px; background:red">x</span>
</td>
</tr>
</tbody>
</table>
Upvotes: 1