title: YII2 add colspan in gridview header
body: <p>How to add a <code>colspan</code> in a header in gridview??</p>
  
  <p>Normally a header looks like this...</p>
  
  <pre><code>&lt;table class="table"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                &lt;th&gt;Header1&lt;/th&gt;
                &lt;th&gt;Header2&lt;/th&gt;
                &lt;th&gt;Header3&lt;/th&gt;
                &lt;th&gt;Header4&lt;/th&gt;
                &lt;th&gt;HeaderA1&lt;/th&gt;
                &lt;th&gt;HeaderA2&lt;/th&gt;
                &lt;th&gt;HeaderA3&lt;/th&gt;
                &lt;th&gt;HeaderB1&lt;/th&gt;
                &lt;th&gt;HeaderB2&lt;/th&gt;
                &lt;th&gt;HeaderB3&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td&gt;body1&lt;/td&gt;
                  &lt;td&gt;body2&lt;/td&gt;
                  &lt;td&gt;body3&lt;/td&gt;
                  &lt;td&gt;body4&lt;/td&gt;
                  &lt;td&gt;body5&lt;/td&gt;
                  &lt;td&gt;body6&lt;/td&gt;
                  &lt;td&gt;body7&lt;/td&gt;
                  &lt;td&gt;body8&lt;/td&gt;
                  &lt;td&gt;body9&lt;/td&gt;
                  &lt;td&gt;body10&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/GHJw8.png" alt="enter image description here"></p>
  
  <p>I want to make it look like this...</p>
  
  <pre><code>&lt;table class="table"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                &lt;th rowspan=2&gt;Header1&lt;/th&gt;
                &lt;th rowspan=2&gt;Header2&lt;/th&gt;
                &lt;th rowspan=2&gt;Header3&lt;/th&gt;
                &lt;th rowspan=2&gt;Header4&lt;/th&gt;
                  &lt;th colspan=3&gt;Header A&lt;/th&gt;
                  &lt;th colspan=3&gt;Header B&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
  
                &lt;th&gt;A1&lt;/th&gt;
                &lt;th&gt;A2&lt;/th&gt;
                &lt;th&gt;A3&lt;/th&gt;
                &lt;th&gt;B1&lt;/th&gt;
                &lt;th&gt;B2&lt;/th&gt;
                &lt;th&gt;B3&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td&gt;body1&lt;/td&gt;
                  &lt;td&gt;body2&lt;/td&gt;
                  &lt;td&gt;body3&lt;/td&gt;
                  &lt;td&gt;body4&lt;/td&gt;
                  &lt;td&gt;body5&lt;/td&gt;
                  &lt;td&gt;body6&lt;/td&gt;
                  &lt;td&gt;body7&lt;/td&gt;
                  &lt;td&gt;body8&lt;/td&gt;
                  &lt;td&gt;body9&lt;/td&gt;
                  &lt;td&gt;body10&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/kkZ8c.png" alt="enter image description here"></p>