title: Make first two columns sticky in a table
body: <p>I need to make the first two columns sticky in a table having n number of columns each of dynamic width.</p>
  <p>I had tried the below CSS</p>
  <pre><code>td:nth-child(1), td:nth-child(2){
     position:sticky;
     left:0px;
  }
  </code></pre>
  <p>And then I had set the left position of second column in JS by calculating the width of first column</p>
  <pre><code>var width = $(&quot;table tr &gt; td:nth-child(1)&quot;).outerWidth();
  $(&quot;table.matrix_class tr &gt; td:nth-child(2)&quot;).css('left', width);
  </code></pre>
  <p>Now I need to do all the stuff in CSS not in JS. How do I do that in pure CSS?</p>
  <p>Additionally, how do you do this when the first column width is <strong>dynamic</strong>?</p>