title: HTML CSS table row height control
body: <p>I have a table with two rows of which I would like to shrink the upper one (highlighted in blue) to the height of its child div (<code>.black</code>), but I couldn't control the height.</p>
  
  <p>I have tried modifying</p>
  
  <ul>
  <li>the div's margin</li>
  <li>the row's margin, padding and height</li>
  <li>table's <code>table-layout</code> style attribute</li>
  </ul>
  
  <p>but none of these brought me any further.</p>
  
  <p><img src="https://i.stack.imgur.com/otovU.jpg" alt="hello"></p>
  
  <p><a href="https://codepen.io/anon/pen/yEjzxx" rel="nofollow noreferrer">Codepen</a> with full source code.</p>
  
  <p>The table:</p>
  
  <pre><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;td rowspan="2" style="padding-left: 10px;"&gt;
        &lt;div class="col1"&gt;&lt;/div&gt;
      &lt;/td&gt;
      &lt;td style="height: 1px;"&gt;
        &lt;div class="black"&gt;&lt;/div&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;
        &lt;div class="out"&gt;&lt;/div&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>The div's style:</p>
  
  <pre><code>div.black {
    display: inline-block;
    width: 128px;
    height: 10px;
    background-color: black;
    vertical-align: top;
    margin: 0px;
    margin-left: 10px;
  }
  </code></pre>