I am dealing with a simple html table where rows can be clicked to show or hide the row below them, which contains additional details for the row above.
The "detail" row that is toggled on click has a colspan set so that one cell spans all columns in the table.
The table expands to take up 100% of the available horizontal space at all times.
However, I have encountered an issue that I cannot explain: when the content in the "detail" row overflows onto multiple lines, it causes all the columns to change their width!
<html>
<head>
<title>asdf</title>
</head>
<body>
<table>
<thead>
<tr>
<th>AAA</th>
<th>BBB</th>
<th>CCC</th>
<th>DDD</th>
<th>EEE</th>
</tr>
</thead>
<tbody>
<tr onclick="document.getElementById('detail').hidden = !document.getElementById('detail').hidden" style="background-color:red">
<td>asdfa</td>
<td>dhfdh dfhd hfdfdh fdh dhdhd</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="detail">
<td colspan="5">
(content here)
</td>
</tr>
<tr>
<td>asdfasdf</td>
<td>dgfhdh sdgdfdh</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
https://jsfiddle.net/93dpowb5/ (click the red row to toggle the display of the "detail" row)
I have been able to replicate the issue in a jsfiddle. (tested on Firefox and Chrome)
I discovered that setting a max-width for the "detail" row resolves the issue (columns widths remain consistent), but I prefer not to do this to allow normal window resizing.
While I am aware of using table-layout: fixed, I want my columns to adjust dynamically. My goal is to keep them at the same width once the layout is calculated!
In essence, I am seeking a solution that maintains dynamic column sizing while preventing any sudden changes in column width when displaying the "detail" row...