title: How can I make the first and second column of a table sticky
body: <p>i have a <code>div</code> with with property </p>
  
  <pre><code>&lt;div id="_body_container" style="height: 500px; overflow-x: auto; overflow-y: auto; "&gt;
  &lt;/div&gt;`
  </code></pre>
  
  <p>inside this div i have the <code>table</code> which has class <code>views-table</code>, this table has 100% width which makes it's parent div:<code>_body_container</code> scrollable.I want to fix the first and the second column of this table sticky at their positions while the left and right scroll event happen for <code>_body_container</code> </p>
  
  <p>structure is like:<img src="https://i.stack.imgur.com/Lc35C.png" alt="enter image description here"></p>