title: A way to have table-rows with height 0 and overflow hidden?
body: <p>I know it should not be possible, but maybe there's some new quirk... Take a look:</p>
  
  <p><a href="https://jsfiddle.net/1hnxzyux/4/" rel="nofollow noreferrer">https://jsfiddle.net/1hnxzyux/4/</a></p>
  
  <p>So I'm using <code>display:table, table-cell and table-row</code>.</p>
  
  <p>I was previously able to get a row to zero height if it doesn't contain anything or if it contains a <code>display:none</code> element, but on the fiddle you can see I've tried to hide the first row/cell by setting <code>height:0</code> and <code>overflow:hidden</code> on all the elements, including a .box inside the cell, and it really doesn't work.</p>
  
  <p>Please especially test on Safari, because it has some more problems than Firefox and Chrome.</p>
  
  <p>Any way to get rid of the height and hide contents?</p>
  
  <hr>
  
  <p>EDIT 1: for now, I've found out that IF using a <strong>real html table</strong> and adding <code>table-layout:fixed</code> to it <strong>along with setting some width for it</strong>, as for the official specs (and some other posts here in SO) the overflow property <strong>does work</strong>.</p>
  
  <p>Though, it seems it doesn't work/apply to, css-tables, and I need css-tables.</p>
  
  <hr>
  
  <p>EDIT 2: Thanks to @zer00ne I updated the fiddle and found that it --would-- work by setting font-size:0 both to td and input field. Though, it's not what I'm currently looking for, since I have to animate the field position and must be fully functional itself. Anyway, these 2 edits can be helpful for other people.</p>