HTML CSS表行高不起作用

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

我试过修改

> div的边缘
>行的边距,填充和高度
> table的表格布局样式属性

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

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

解决方法

而不是这个< td style =“height：1px;”> put< td style =“font-size：10px;”>,您可能还需要添加line-height：0px.

原文地址：https://www.jb51.cc/html/226688.html