HTML CSS表行高度控件

Question

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

我试过修改

• div的边缘
• 行的边距,填充和高度
• table的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.