HTML CSS 表格行高控制

Question

我有一个包含两行的表格，我想将上面的那一行（以蓝色突出显示）缩小到其子 div 的高度 (.black)，但我无法控制高度。

我试过修改

• div 的边距
• 行的边距、内边距和高度
• 表格的table-layout 样式属性

但这些都没有让我更进一步。

Codepen 带有完整的源代码。

桌子：

<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>

div的样式：

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

Answer 1

而不是这个<td style="height: 1px;"> 放入<td style="font-size: 10px;">，您可能还需要添加line-height: 0px。