title: how to fixed column with merge column header
body: <p>how to fixed column no, area, category, sub category, and other column scroll left to right ?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class="table table-bordered table-sm"&gt;
    &lt;thead style="background:red;color:white"&gt;
    &lt;tr&gt;
      &lt;th rowspan="2"&gt;No&lt;/th&gt;
      &lt;th rowspan="2"&gt;Area&lt;/th&gt;
      &lt;th rowspan="2"&gt;Category&lt;/th&gt;
      &lt;th rowspan="2"&gt;Sub Category&lt;/th&gt;
      &lt;th rowspan="2"&gt;Risiko&lt;/th&gt;
      &lt;th rowspan="2"&gt;Cause&lt;/th&gt;
      &lt;th rowspan="2"&gt;Impact&lt;/th&gt;
      &lt;th rowspan="1" colspan="6"&gt;Analisis&lt;/th&gt;
      &lt;th rowspan="1" colspan="4"&gt;Evaluasi&lt;/th&gt;
      &lt;th rowspan="1" colspan="2"&gt;Risk Treatment Options&lt;/th&gt;
      &lt;th rowspan="2"&gt;Accountabel Unit&lt;/th&gt;
      &lt;th rowspan="2"&gt;Sumber Daya&lt;/th&gt;
      &lt;th rowspan="2"&gt;Deadline&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th colspan="2"&gt;Probabilitas&lt;/th&gt;
      &lt;th colspan="2"&gt;Impact&lt;/th&gt;
      &lt;th colspan="2"&gt;Risk Level&lt;/th&gt;
      &lt;th&gt;PIC&lt;/th&gt;
      &lt;th&gt;Urgency&lt;/th&gt;
      &lt;th&gt;Existing Control&lt;/th&gt;
      &lt;th&gt;Risk Control&lt;br&gt;Assessment&lt;/th&gt;
      &lt;th&gt;Proaktif&lt;/th&gt;
      &lt;th&gt;Reaktif&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
  
  &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>JsFiddle Link: <a href="http://jsfiddle.net/5p77f171/" rel="nofollow noreferrer">http://jsfiddle.net/5p77f171/</a></p>