CSS table rows are too tall without overflow

Question

I am trying to make a scrollable table with the head row and body rows all the same fixed height, but unless the table has a bunch of rows in it, the body rows are too tall even with no wrapping. I can't see why this would happen, as the same style is applied to both the <th> elements and the <td> elements but only the <td>s have this issue.

I have seen a few posts on how to make rows fixed height but they mostly seem to be related to text wrapping - does anyone know why the rows would look like this with no wrapping?

one body row: https://jsfiddle.net/wf4aceqk/35/

multiple body rows: https://jsfiddle.net/wf4aceqk/34/

#stats_holdings {
  width: 300px;
  height: 200px;
  font-size: 20px;
  border: 1px solid black;
}

#holdings_table {
  text-align: center;
  table-layout: fixed;
  height: 150px;
  border-collapse: separate;
  border-spacing: 0;
}

#holdings_table th,
td {
  border-bottom: 1px solid black;
  width: 20%;
  height: 40px;
}

<div id="stats_holdings">
  <table id="holdings_table">
    <thead>
      <tr>
        <th>Ticker</th>
        <th>Shares</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>AMZN</td>
        <td>5</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

may i know why you using Height for this #holdings_table and #stats_holdings ??? as you used Height for Stats_Holdings it makes your block to wrap the table Check the Image For Change.similarly adding height to holding_table with increase the height of each data cell which makes your table to looks huge.