A way to have table-rows with height 0 and overflow hidden?

I know it should not be possible, but maybe there's some new quirk... Take a look:

So I'm using display:table, table-cell and table-row.

I was previously able to get a row to zero height if it doesn't contain anything or if it contains a display:none element, but on the fiddle you can see I've tried to hide the first row/cell by setting height:0 and overflow:hidden on all the elements, including a .box inside the cell, and it really doesn't work.

Please especially test on Safari, because it has some more problems than Firefox and Chrome.

Any way to get rid of the height and hide contents?

EDIT 1: for now, I've found out that IF using a real html table and adding table-layout:fixed to it along with setting some width for it, as for the official specs (and some other posts here in SO) the overflow property does work.

Though, it seems it doesn't work/apply to, css-tables, and I need css-tables.

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.

Solution

After about one week of searching for a solution, the answer is:

no, it's still not possible. At least, it's not possible in a reliable and versatile way. It's only possible in ways that somewhat limit elements or future actions.

If one doesn't strictly need css-tables (like me in this specific case), you can successfully mimic the same behaviour in 2 ways:

use real tables, apply table-layout:fixed and a width to the table (doesn't matter the unit, can be percentage, for ex.). Than just height:0/oveflow:hidden as usual.
use flexbox. It's the css construct that, with the right rules applied, can better approximate the table behaviour.

Hope it helps