title: How to add scroll bar to the table body using DataTables plugin?
body: <p>I am using dataTables plugin to show my data in table, but when I add scroll bar to the table body, table header looks like this: </p>
  
  <p><img src="https://i.stack.imgur.com/juOpj.png" alt="datatable header"></p>
  
  <p>I found solution in Datatable documentation they suggest to add 2 lines </p>
  
  <pre><code>$(".dataTables_scrollHeadInner").css({"width":"100%"});
  $(".table ").css({"width":"100%"});
  </code></pre>
  
  <p>but when I add these two lines in javascript, the table alignment looks bad. How can I add a scroll bar to the datatable body?</p>
  
  <p>JavaScript:</p>
  
  <pre><code>$('#protein-table').DataTable({
      scrollY:'400px',
      scrollCollapse:true,
      ordering: false,
  });
  </code></pre>