Datatable styling not working
<p>I have a peculiar problem. I am developing a php site that required Datatables to work with it. I noticed that Datatables styling does not work when I run it on localhost be it Firefox or Chrome. My code is as follows: </p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
--&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;link rel="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"/&gt;
        &lt;script src="//code.jquery.com/jquery-2.2.3.js" type="text/javascript"&gt;&lt;/script&gt;
        &lt;script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js" type="text/javascript"&gt;&lt;/script&gt;
        &lt;script&gt;
        $(document).ready(function() {
            $('#example').DataTable();
        } );
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;table id="example" class="display" cellspacing="0" width="100%"&gt;
        &lt;thead&gt;
            &lt;tr&gt;
                &lt;th&gt;Name&lt;/th&gt;
                &lt;th&gt;Position&lt;/th&gt;
                &lt;th&gt;Office&lt;/th&gt;
                &lt;th&gt;Age&lt;/th&gt;
                &lt;th&gt;Start date&lt;/th&gt;
                &lt;th&gt;Salary&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tfoot&gt;
            &lt;tr&gt;
                &lt;th&gt;Name&lt;/th&gt;
                &lt;th&gt;Position&lt;/th&gt;
                &lt;th&gt;Office&lt;/th&gt;
                &lt;th&gt;Age&lt;/th&gt;
                &lt;th&gt;Start date&lt;/th&gt;
                &lt;th&gt;Salary&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/tfoot&gt;
        &lt;tbody&gt;
            &lt;tr&gt;
                &lt;td&gt;Tiger Nixon&lt;/td&gt;
                &lt;td&gt;System Architect&lt;/td&gt;
                &lt;td&gt;Edinburgh&lt;/td&gt;
                &lt;td&gt;61&lt;/td&gt;
                &lt;td&gt;2011/04/25&lt;/td&gt;
                &lt;td&gt;$320,800&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;Garrett Winters&lt;/td&gt;
                &lt;td&gt;Accountant&lt;/td&gt;
                &lt;td&gt;Tokyo&lt;/td&gt;
                &lt;td&gt;63&lt;/td&gt;
                &lt;td&gt;2011/07/25&lt;/td&gt;
                &lt;td&gt;$170,750&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;Ashton Cox&lt;/td&gt;
                &lt;td&gt;Junior Technical Author&lt;/td&gt;
                &lt;td&gt;San Francisco&lt;/td&gt;
                &lt;td&gt;66&lt;/td&gt;
                &lt;td&gt;2009/01/12&lt;/td&gt;
                &lt;td&gt;$86,000&lt;/td&gt;
            &lt;/tr&gt;
                    &lt;/tbody&gt;
    &lt;/table&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>And this gives me a rather ugly version of the datatable. Search functionalities and filtering works but is missing styles and column reordering.</p>

<p>However the strange thing is that a jsfiddle that I drew up containing the same data render as expected, with all styling, etc... The fiddle link is as follows: <a href="https://jsfiddle.net/gkyya29h/" rel="noreferrer">https://jsfiddle.net/gkyya29h/</a></p>

<p>I'm using XAMPP server with firefox as my default browser. Can someone help me figure this out? I may be doing some very obvious mistake but I'm failing to see it. Thank You. </p>