title: Setting height on TR is different from height on TD. Why?
body: <p>I don't understand the different behavior between these two pieces of HTML:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;&lt;html&gt;&lt;body&gt;
  &lt;TABLE style='border:1px solid black'&gt;
  &lt;TR&gt;
      &lt;TD style='height:100px'&gt;&lt;div style='width:100px;height:100%;background-color:#ccc'&gt;&lt;/div&gt;&lt;/TD&gt;
  &lt;/TR&gt;
  &lt;/TABLE&gt;
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>JFiddle: <a href="https://jsfiddle.net/ceyq6n10/" rel="nofollow noreferrer">https://jsfiddle.net/ceyq6n10/</a></p>
  
  <p>and</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;&lt;html&gt;&lt;body&gt;
  &lt;TABLE style='border:1px solid black'&gt;
  &lt;TR style='height:100px'&gt;
      &lt;TD&gt;&lt;div style='width:100px;height:100%;background-color:#ccc'&gt;&lt;/div&gt;&lt;/TD&gt;
  &lt;/TR&gt;
  &lt;/TABLE&gt;
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>JFiddle: <a href="https://jsfiddle.net/hmjvu5gf/" rel="nofollow noreferrer">https://jsfiddle.net/hmjvu5gf/</a></p>
  
  <p>In the first example, the DIV is vertically expanded to 100% of the TD height. In the second one, even if the TD has the right vertical size, the DIV has height 0.</p>
  
  <p>Could you please explain me why? Thanks</p>