CODEWITHSUNDEEP
css
machineghost
machineghost

Reputation: 35735

Table Cell Not Growing to its Contents Size

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:

  1. why my <td> isn't growing to encompass its <span>?
  2. what CSS I could use to make it 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

Answers (1)

Stickers
Stickers

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.

jsfiddle

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

Related Questions