title: How can I make the contents of a table cell overflow vertically without also expanding the table cells height?
body: <p>I have a table cell with a <code>div</code> inside. I want the <code>div</code> 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 <code>div</code>. The code below is what I have tried, but it doesn't work.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr class="row"&gt;
          &lt;td class="cell"&gt;
              &lt;div class="overflow"&gt;Overlow outside of this cell&lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.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;
  }
  </code></pre>