HTML CSS table row height control

Question

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 (.black), but I couldn't control the height.

I have tried modifying

• the div's margin
• the row's margin, padding and height
• table's table-layout style attribute

but none of these brought me any further.

Codepen with full source code.

The table:

<table>
  <tr>
    <td rowspan="2" style="padding-left: 10px;">
      <div class="col1"></div>
    </td>
    <td style="height: 1px;">
      <div class="black"></div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="out"></div>
    </td>
  </tr>
</table>

The div's style:

div.black {
  display: inline-block;
  width: 128px;
  height: 10px;
  background-color: black;
  vertical-align: top;
  margin: 0px;
  margin-left: 10px;
}

Answer 1

Instead of this <td style="height: 1px;"> put <td style="font-size: 10px;">, and you may have to also add line-height: 0px.