title: How to make a table in HTML with variable and fixed column widths and grouping header?
body: <p>How can I style a table in html so it gets laid out like this:</p>
  
  <pre><code>&lt;-       full page width             -&gt;
  &lt;-20px-&gt;&lt; dynamic &gt;&lt;-20px-&gt;&lt; dynamic  &gt;
  +------------------+-------------------+
  ¦ A                ¦ B                 ¦ header row 1
  +-------+----------+-------+-----------+
  + A1    ¦ A2       ¦ B1    ¦ B2        ¦ header row 2
  +-------+----------+-------+-----------+
  ¦ a1      a2         b1      b2        ¦ data rows
  </code></pre>
  
  <p>Without the grouping header row, I would do it like this:</p>
  
  <pre><code>&lt;table style="width:100%; table-layout:fixed;"&gt;
    &lt;tr&gt;
      &lt;th style="width:20px;"&gt;A1&lt;/th&gt;
      &lt;th style="           "&gt;A2&lt;/th&gt;
      &lt;th style="width:20px;"&gt;B1&lt;/th&gt;
      &lt;th style="           "&gt;B2&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;a1&lt;/td&gt;
      &lt;td&gt;a2&lt;/td&gt;
      &lt;td&gt;b1&lt;/td&gt;
      &lt;td&gt;b2&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>This works nicely, when I resize the browser window, the two cols without explicit width take the available space, while the two fixed cols stay at the given width.</p>
  
  <p>But when I add the grouping header row, I have not found any way to assign widths so that the table has two fixed and two adaptable columns.</p>