Table tag is taking more height than parent divs mentioned height

I have a table inside a div and i have given the div as 16px height but the table is taking 25px even if i have given inline style as 16px and if i give inline style table more than 25px then it applies.

Code:

<style>
table {
           table-layout: fixed;
            width: 100%;
            border-spacing: 10px 0;
            border-collapse: separate;
}
td {
            overflow: hidden;
}
</style>
<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>


you need to set border-spacing to 0, padding to 0
the code below ends up with the table being 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>

Your div’s height is definitely 16px, but it doesn’t mean that your table will also take 16px, it’s height depends on its content and it will visually overflow your div, unless you set your div’s overflow:hidden.

I have added backgrounds to the table and the container div so you can see it better and have added an explanation of where your height is coming from to your original code.

    <div style="height: 16px; background: pink;">
          <table style="background: rgba(100,100,100, 0.5);">
            <tbody>
              <tr> <!-- affected by browser's default border-spacing -->
                <td  style="width: 160px;">
                  <div style="white-space: nowrap;padding-left: 20px;">
                  </div>
                </td>
                  <td  style="width: 100px;"> <!-- affected by browser's default border-spacing: 2px and padding: 1px -->
                  <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                  <div>Actyve</div> <!-- this is taking 18px -->
                </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

you can read more about border spacing here

what you should do to force your table to be 16px is: