html - 表格标签占用的高度高于父 div 提到的高度

Question

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

Answer 1

你需要设置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>