title: Bootstrap4 and Datatables Integration not working
body: <p>I'm attempting to integrate datatables with bootstrap 4 and there are some major conflicts. I am getting the page navigation and the buttons in the style of bootstrap 4 but my table looks like a general HTML table with random bolded borderlines. I believe that my styles are getting overridden somewhere but I can't for the life of me figure out where... 
  <a href="https://i.stack.imgur.com/wfLMG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wfLMG.png" alt="enter image description here"></a></p>
  
  <p>imgur link here <a href="https://imgur.com/a/2nkm4F0" rel="nofollow noreferrer">https://imgur.com/a/2nkm4F0</a></p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.css"/&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/autofill/2.2.2/css/autoFill.bootstrap4.min.css"/&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.bootstrap4.css"/&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/colreorder/1.4.1/css/colReorder.bootstrap4.css"/&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/3.2.4/css/fixedColumns.bootstrap4.css"/&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.3/css/fixedHeader.bootstrap4.css"/&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/keytable/2.3.2/css/keyTable.bootstrap4.css"/&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.1/css/responsive.bootstrap4.css"/&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowgroup/1.0.2/css/rowGroup.bootstrap4.css"/&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowreorder/1.2.3/css/rowReorder.bootstrap4.css"/&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/scroller/1.4.4/css/scroller.bootstrap4.css"/&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.5/css/select.bootstrap4.css"/&gt;
  
  &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdn.datatables.net/autofill/2.2.2/js/dataTables.autoFill.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdn.datatables.net/autofill/2.2.2/js/autoFill.bootstrap4.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.bootstrap4.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.colVis.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdn.datatables.net/colreorder/1.4.1/js/dataTables.colReorder.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/3.2.4/js/dataTables.fixedColumns.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdn.datatables.net/fixedheader/3.1.3/js/dataTables.fixedHeader.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdn.datatables.net/keytable/2.3.2/js/dataTables.keyTable.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.1/js/dataTables.responsive.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdn.datatables.net/rowgroup/1.0.2/js/dataTables.rowGroup.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdn.datatables.net/rowreorder/1.2.3/js/dataTables.rowReorder.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdn.datatables.net/scroller/1.4.4/js/dataTables.scroller.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdn.datatables.net/select/1.2.5/js/dataTables.select.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I make sure that there is only 1 import of jquery 3.3.1 and 1 import of bootstrap's css and bootstrap.min.js. </p>
  
  <p>EDIT: HTML for the table that I am using. </p>
  
  <pre><code>&lt;div id="similar-results" class="tabcontent"&gt;
  &lt;h3&gt;Similar Documents&lt;/h3&gt;
  &lt;table border="1" class="dataframe table display" id="example"&gt;
  </code></pre>