HTML Table Formatting: 2 colspan cell messes up column width - html

Question

So say I have the following HTML:
<table>
<tr>
<th>Heading:</th><td>text</td>
</tr>
<tr>
<th>Heading 2:</th><td>text</td>
</tr>
<tr>
<th colspan="2">Really long heading:</th>
</tr>
<tr>
<td></td><td>text</td>
</tr>
</table>
This creates a table with two columns, one for headers (left) and one for values (right) - except for one row, where a long header is taking up both columns, and the value is showed in the right most column on the next row. Along with this, I have some styling; most importantly:
td:last-child {
width: 100%;
}
th, td {
white-space:nowrap;
}
This makes it so the right most column takes any extra space. And what I have is working, even though the "really long" header is longer/wider than the header column. However, when I add a few more words to the really long header (but not making it long enough to increase the width of the whole table), after a certain point the width of the left column starts to increase with the length of the long header, decreasing the width of the right column. What's going on?

Answer 1

You can't define width:100% of an cell of a table with multiple column.
You should use colgroup tag to define width of cell:
.col-left {
width: 20%;
}
.col-right {
width: 80%;
}
<table>
<colgroup>
<col class="col-left">
<col class="col-right">
</colgroup>
<tr>
<th>Heading:</th><td>text</td>
</tr>
<tr>
<td colspan="2">Really long heading:</td>
</tr>
<tr>
<th>lorem ispum dolores hello</th><td>text</td>
</tr>
</table>
Another tricks to set a cell at the minimum and obviously the another cell take the rest of the width, are to set the first one at 1px:
table {
width: 200px;
}
th, td {
border: 1px solid #000;
}
th {
width:1px;
}
<table>
<tr>
<th>hello</th>
<td>world</td>
</tr>
<tr>
<td colspan="2">hi</td>
</tr>
<tr>
<td></td>
<td>text</td>
</tr>
</table>