Chrome浏览器中table元素的overflow:clip属性为何不生效？

我在表格中实现了一个可收缩/展开的<tr>元素，给该行设置了position: relative、固定高度和overflow: clip属性，内部<td>设置为position: absolute。该效果在Firefox中正常生效，但Chrome浏览器无法识别overflow: clip，导致样式不符合预期。

以下是示例代码：

HTML代码 #

<body>
  <table>
    <thead>
      <tr>
        <th>Table content title</th>
      </tr>
    </thead>
    <tobdy>
      <tr class='crop'>
        <td>Table contents</td>
      </tr>
    </tobdy>
  </table>
</body>

CSS代码 #

table {
  border-collapse: collapse;
}

td {
  background: red;
  padding: 10px 20px;
}

.crop {
  position: relative;
  height: 23px;
  border: 2px solid black;
  overflow: clip;
}

.crop td {
  position: absolute;
}

Firefox（符合预期效果） #

Chrome（不符合预期效果） #

内容的提问来源于stack exchange，提问作者Co-7