Styling issue with two datatables.

Hello All,

I'm experiencing a very weird issue with datatables when using two of them, issue is the following one:

I have these definitions:

(function($){
$(document).ready(function() {

$("#example").DataTable( {
        "columns": [
            null,
            {className: "number"},
            {className: "number"},
            null,
            null,
            null,
            null,
            {visible: false},
            {visible: false}
        ],
        "order": [[ 6, "desc" ]],
        "language": {
            "search": "",
            "searchPlaceholder": "Search this list"
        },
        "dom": '<"toolbar">frtip'
    } );

$('#example3').DataTable( {
        "columns": [
            null,
            {className: "number"},
            {className: "number"},
            null,
            null,
            null,
            null,
            {visible: false},
            {visible: false}
        ],
        "order": [[ 6, "desc" ]],
        "language": {
            "search": "",
            "searchPlaceholder": "Search this list"
        },
        "dom": '<"toolbar">frtip'
    } );

For tables:

<

table id="example" class="display table table-striped" cellspacing="0" width="100%">

and

<

table id="example3" class="display table table-striped" cellspacing="0" width="100%">

The problem I'm experiencing is that the css class is not being applied to the "example3" table at all, which is weird because if I remove the first table and rename "example3" into "example" it magically works. Same issue happens if I change "example" into "example1" or anything else, styling just goes away.

Are the stylesheets somehow linked to the table ids (specifically "example")? This is very weird because it seems to be working only when there is one table and it has "example" as the id. Everything else is working, I can search and sort and I see the data on both tables perfectly, it is just that styling issue.

Any help would be extremely appreciated.