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