html - 表格标记的高度比父div提到的高度高

我在div内有一个表格，我给div设置了16px的高度，但是即使我给定内联样式为16px，并且如果我给内联样式表大于25px，则该表也要占用25px，然后适用。

码：

table {
  table-layout: fixed;
  width: 100%;
  border-spacing: 10px 0;
  border-collapse: separate;
}

td {
  overflow: hidden;
}

<div style="height: 16px;
     overflow: hidden;
     text-overflow: ellipsis;">
  <table>
    <tbody>
      <tr>
        <td style="width: 160px;">
          <div style="white-space: nowrap;padding-left: 20px;">
          </div>
        </td>
        <td style="width: 100px;">
          <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
            <div>Actyve</div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

最佳答案

您需要将border-spacing设置为0，padding设置为0
下面的代码最终以表格为16px

<div style="
height: 16px;
">
<table style="
height: 16px;
border-spacing: 0px;
border-collapse: collapse;
">
<tbody>
<tr>
<td style="width: 160px;">
<div style="white-space: nowrap;padding-left: 20px;">
</div>
</td>
<td style="width: 100px;height: 16px;padding: 0;">
<div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
<div style="
height: 16px;
">Actyve</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>

关于html - 表格标记的高度比父div提到的高度高，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45983917/