How can I make the contents of a table cell overflow vertically without also expanding the table cells height?

css, html, html-table

Solution

If I get you right, this might help:

.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>

Problem

I have a table cell with a `div` inside. I want the `div` to overflow outside of the table cell. How can I make this happen? To be clear, I don't want the table cell to expand its height with the `div`. The code below is what I have tried, but it doesn't work. 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; } ```

Original source