Is there a way to format an HTML table so that it appears like this:
<- full page width ->
<-20px->< dynamic ><-20px->< dynamic >
+------------------+-------------------+
¦ A ¦ B ¦ header row 1
+-------+----------+-------+-----------+
+ A1 ¦ A2 ¦ B1 ¦ B2 ¦ header row 2
+-------+----------+-------+-----------+
¦ a1 a2 b1 b2 ¦ data rows
If I didn't have the grouping header row, formatting would be simple:
<table style="width:100%; table-layout:fixed;">
<tr>
<th style="width:20px;">A1</th>
<th style=" ">A2</th>
<th style="width:20px;">B1</th>
<th style=" ">B2</th>
</tr>
<tr>
<td>a1</td>
<td>a2</td>
<td>b1</td>
<td>b2</td>
</tr>
</table>
This method works well as the dynamically sized columns adjust with the window size while the fixed-width columns remain constant.
However, when attempting to include the grouping header row, achieving two fixed and two dynamic columns has been challenging.