CSS table 行太高而没有溢出

Question

我正在尝试制作一个可滚动的 table，其中标题行和 body 行都具有相同的固定高度，但除非 table 中有一堆行，即使没有换行，body 行也太高了。我不明白为什么会发生这种情况，因为相同的样式应用于 <th> 元素和 <td> 元素，但只有 <td> 元素有此问题。

我看过一些关于如何使行固定高度的帖子，但它们似乎大多与文本换行有关 - 有谁知道为什么行在没有换行的情况下看起来像这样？

一个 body 行：https://jsfiddle.net/wf4aceqk/35/

多个 body 行：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

我可以知道你为什么要为这个 #holdings_table 和 #stats_holdings 使用高度吗？？？当你为 Stats_Holdings 使用 Height 时，它会让你的块包裹 table Check the Image For Change。类似地，将高度添加到 holding_table 并增加每个数据单元格的高度，这使您的 table 看起来很大。

CSS table 行太高而没有溢出

CSS table rows are too tall without overflow

html

css

css-tables