title: Two fixed column table
body: <p>I am trying to create a two fixed column table (freeze the first two columns), that respects the widths of the td elements that I give them.</p>
  
  <p>When the two columns get fixed, the widths of the columns are randomly set.</p>
  
  <pre><code>&lt;div id="tableContainer"&gt;
  &lt;table class="all-table"&gt;
                      &lt;colgroup&gt;
                      &lt;col  style="width:30px;" /&gt;
                      &lt;col  style="width:30px;" /&gt;
                      &lt;col style="width:180px;" /&gt;
                      &lt;col style="width:180px;" /&gt;
                      &lt;col style="width:180px;" /&gt;
                      &lt;col style="width:30px;" /&gt;
                  &lt;/colgroup&gt;
  &lt;thead&gt;
  &lt;tr&gt;
      &lt;td class="td-fixed gray-background"&gt;a&lt;/td&gt;
      &lt;td class="td-fixed td-fixed-margin gray-background"&gt;a&lt;/td&gt;
      &lt;td class="gray-background"&gt;aaaaaaaaaaaa&lt;/td&gt;
      ...
  &lt;/tr&gt;
      ...
      &lt;/thead&gt;
  &lt;tbody&gt;
      &lt;tr&gt;
      &lt;td class="td-fixed white-background"&gt;a&lt;/td&gt;
      &lt;td class="td-fixed td-fixed-margin white-background" &gt;a&lt;/td&gt;
      &lt;td&gt;aaaaaaaaaaaa&lt;/td&gt;
      ...
      &lt;/tr&gt;
          &lt;tr&gt;
      &lt;td class="td-fixed white-background"&gt;a&lt;/td&gt;
      &lt;td class="td-fixed td-fixed-margin white-background"&gt;a&lt;/td&gt;
      &lt;td &gt;aaaaaaaaaaaa&lt;/td&gt;
      ...
  &lt;/tr&gt;
      ...
  &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS part can be found in the link.</p>
  
  <p><a href="http://jsfiddle.net/pcmhd42e/8/" rel="nofollow">http://jsfiddle.net/pcmhd42e/8/</a></p>
  
  <p><a href="http://jsfiddle.net/pcmhd42e/9/" rel="nofollow">http://jsfiddle.net/pcmhd42e/9/</a> - updated version from gewh</p>
  
  <p>Could not find a workaround that would work with CSS, the solution does not use Bootstrap.</p>