title: Datatable with fixed header and fixed columns using datatable.js
body: <p>I need a <a href="https://datatables.net/" rel="nofollow noreferrer">datatable</a> enabled table that has</p>
  
  <ol>
  <li>fixed header / footer with scrolling using the main browser scroll bars</li>
  <li>left and right columns should be fixed.</li>
  </ol>
  
  <p>DataTables provides 2 plugins <a href="https://datatables.net/extensions/fixedheader" rel="nofollow noreferrer">fixedHeader</a> &amp; <a href="https://datatables.net/extensions/fixedcolumns" rel="nofollow noreferrer">fixedColumns</a> that provides these features. I am unable to make the two plugins to work together. I am facing following issues:</p>
  
  <ol>
  <li>When the header or footer gets fixed, it’s width extends beyond the table width</li>
  <li>Horizontal scrollbar does not appear when the footer is fixed</li>
  <li>I have a dropdown menu on the right most column. The menu gets partially hidden</li>
  </ol>
  
  <p>I have provided a sample of my code at <a href="https://jsfiddle.net/xpvt214o/20896/" rel="nofollow noreferrer"><code>here</code></a></p>
  
  <p>Please help me to resolve the issues</p>