css - Table Cell Not Growing to its Contents Size -

i have simple table:

<table>     <tbody>         <tr> <!-- note: min-width make 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 produces. have expected <td> grow size of contents, giving me blue dotted line surrounding big block of red.

that doesn't happen though. instead, row's height remains fixed (as can see looking @ blue line), , inner <span> spills out past <td>, without changing it.

clearly i'm misunderstanding how table cells grow, thought expand fit contents (unless use, say, overflow: hidden). can please explain:

1. why <td> isn't growing encompass <span>?
2. what css use make encompass span?

p.s. did try searching answer this, find people trying not have <td> grow (implying that, default, grow).

i think problem inline level element <span>+ padding. if set span { display: block; }, work expected.

jsfiddle

span { display: block; }

<table>      <tbody>          <tr>  <!-- note: min-width make 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>