html - テーブルセルの高さを拡張せずに、テーブルセルの内容を垂直方向にオーバーフローさせるにはどうすればよいですか？

Question

中にテーブルセルがありますdiv。divテーブルセルの外にオーバーフローさせたい。どうすればこれを実現できますか？明確にするために、テーブルセルの高さを。で拡張したくありませんdiv。以下のコードは私が試したものですが、機能しません。

HTML：

<table>
    <tr class="row">
        <td class="cell">
            <div class="overflow">Overlow outside of this cell</div>
        </td>
    </tr>
</table>

CSS：

.row {
    height:24px;
    overflow:visible;
}
.cell {
    overflow:visible;
    max-height:24px !important;
}
.overflow {
    height:24px;
    font-size:12px;
    clear:both;
    white-space: nowrap;
    line-height:16px;
    zoom:1;
    text-align:left;
    overflow:hidden;
}

Answer 1

私があなたを正しく理解すれば、これは役立つかもしれません：

.row {
  height: 24px;
  overflow: visible;
}

.cell {
  overflow: visible;
  max-height: 24px !important;
  border: 1px solid #cccccc;
  width: 10px;
}

.overflow {
  height: 24px;
  font-size: 12px;
  line-height: 16px;
  position: absolute;
}

<table>
  <tr class="row">
    <td class="cell">
      <div class="overflow">Overlow outside of this cell</div>
    </td>
  </tr>
</table>

Answer 2

.overflow {
    height: 100px;
    width: 100px !important;
    overflow-y: scroll;
}