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

Question

I know it should not be possible, but maybe there's some new quirk... Take a look:
https://jsfiddle.net/1hnxzyux/4/
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.

Answer 1

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

Answer 2

You shouldn't set height of a row. Just place div tag inside each td and put your content in div but not in td directly. The height of row will be equal to height of its content. Set height and overflow for div element and set 0 in top and bottom padding of td. And of course you can use transition for height of div.
$(function() {
$('button').on('click', toggleColumn);
});
function toggleColumn() {
$('div').toggleClass('rollup');
}
table {
border-collapse: collapse;
}
td {
padding-top: 0;
padding-bottom: 0;
border: 1px solid black;
}
div {
background-color: yellow;
height: 40px;
padding-top: 10px;
padding-bottom: 10px;
overflow: hidden;
transition: 2s all;
}
div.rollup {
height: 0;
padding-top: 0;
padding-bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>toggle</button>
<table>
<tr>
<td><div>Column 1</div></td>
<td><div>Column 2</div></td>
<td><div>Column 3</div></td>
<td><div>Column 4</div></td>
</tr>
</table>

Answer 3

If you are simply out after making the first row "invisible", you should simply be able to use CSS's :first-of-type like such:
/* Hide the first occurance of the 'tr' class */
.tr:first-of-type {
display: none;
}
Other than that, I'm not sure why you wouldn't be able to do something like this, alternatively? (a bit like the method you had attempted):
HTML
<div class="tr hidden">
<div class="td">
My Content
</div>
</div>
CSS
.hidden {
display: none;
}
Last but not least, may I ask why you are creating a "handmade" table using div's, instead of HTML's designated table?

Answer 4

You can animate opening a table row with HTML tables using this css:
tr.info td {
transition: all 0.5s ease;
}
tr.info.hide td {
line-height: 0;
padding-top: 0;
padding-bottom: 0;
overflow: hidden;
opacity: 0;
}
Remove the vertical padding which causes the apparent "minimum height" (thanks Andrey Shaforostov). Set opacity 0 to make the text appear as the row grows - smoother effect than using font-size. No need for inner div's - just add/remove the "hide" class on the table row.