Why does the table ignore column width and make them all even when using fixed-layout with a 100% width setting?
Here is how the table looks without the 100% width:
https://i.sstatic.net/MNrjZ.png
However, setting the table width to 100% causes all columns to become evenly sized:
https://i.sstatic.net/oS63q.png
How can this be fixed? I need to keep the 'fixed-layout' and 'merged th', while still making the table 100% wide.
(I could detect when the table uses 100% width and replace 'merged th' with div before the table, but I am looking for a better solution.)
The code snippet:
<style>
th, td { border: 1px solid black; }
table {
width: 100%;
table-layout: fixed;
}
</style>
<table>
<tr>
<th colspan="2" width="100%">100% united th</th>
</tr>
<tr>
<th style="width: 20%;">20% th</th>
<th style="width: 80%;">80% th</th>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
</table>