I am creating a table which contains drop-downs for each element (essentially an accordion), however I had wanted to continue using an html table as it is useful in generating nicely laid out column sizes. In the process, I have come across a discrepancy between flexbox overflows between Firefox and Chrome, that I cannot seem to fix.
I created a simple example here, and I added a code example below.
In Firefox, clicking the "click here" button to open the dropdown does so as I would have expected (the desired behavior), however in Chrome the content that should be hidden still shows up.
One fix I have already found is simply setting display: none and then display: flex when open on the wrapping div element in each dropdown, however I would ideally like to keep the animation where the contents inside of the dropdown appear attached to the bottom. Additionally, setting display: flex on the dropdown td element allows the animation to work, but seems to override the colspan attribute, pushing all of the content into the first column.
Is this a known difference with a specific workaround, and if so how might I fix this? or might I be using a flexbox badly?
let active = false;
function handleClick() {
active = !active;
if (active) {
document.getElementById("tr").classList.add("active");
} else {
document.getElementById("tr").classList.remove("active");
}
}table {
width: 400px;
border: 1px solid black;
text-align: left;
}
th {
border-bottom: 1px solid black;
}
.tr {
height: 0px;
overflow: hidden;
transition: ease height 0.3s;
}
.td {
height: 0px;
transition: ease height 0.3s;
column-span: 50px;
/*
Uncommenting the line below allows for the dropdown in Chrome,
but it then forgets about the colspan on the td element.
*/
/* display: flex; */
}
.active {
height: 150px;
}
.active .td {
height: 150px;
}
.div1 {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
bottom: 0;
align-items: center;
}
.div2 {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 100%;
}<body>
<table>
<tr>
<th>col 1</th>
<th>col 2</th>
<th>col 3</th>
</tr>
<tr onclick="handleClick()">
<td>data 1</td>
<td>data 2</td>
<td style="cursor: pointer;">click here</td>
</tr>
<tr id="tr" class="tr">
<td colspan="3" class="td">
<div class="div1">
<div class="div2">
stuff
<input />
</div>
</div>
</td>
</tr>
</table>
</body>