Basic jQuery Data table

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Pune</title>
  <link rel="stylesheet" href="style.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
  <style type="text/css" title="currentStyle">
    @import "https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css";
  </style>
  <script src="script.js"></script>
</head>

<body>
  <h1>Basic Data Table!</h1>
  <hr>
  <br />
  <div class="tablestyle">
    <table id="example" class="display" width="1024px"></table>

  </div>
  <hr>
  <br />
  <div class="tablestyle">
    <table style="display: none" id="expanded" class="display" width="1024px;"></table>
  </div>
</body>

</html>

$(document).ready(function () {
    var visibility = false;
    var table = $('#example').DataTable({
        data: dataSet,
        columns: [
            { title: "Employee ID" },
            { title: "Name" },
            { title: "Position" },
            { title: "Office" },
            { title: "Extn." },
            { title: "Start date" }
        ]
    });

    $('#example tbody').css('visibility', 'hidden');

    $('#example thead').on('click', function () {
        visibility = !visibility;
        $('#example tbody').css('visibility', visibility ? 'visible' : 'hidden');

    });

    $('#example tbody').on('click', 'tr', function () {
        var data = table.row(this).data();
        // data has selected row contents
        var matchedEmployee = $.grep(salary, function (v) {
            return v[0] === data[0];
        });

        console.log(matchedEmployee);
        $('#expanded').DataTable({
            data: matchedEmployee,
            columns: [
                { title: "Employee ID" },
                { title: "Salary" }
            ],
            paging: false,
            searching: false,
            "bDestroy": true
        });

        $('#expanded').css('display', 'block');
    });
});

//sample data for upper table
var dataSet = [
    ["1", "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25"],
    ["10", "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25"],
    ["20", "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12"],
    ["15", "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29"],
    ["11", "Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28"],
    ["41", "Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02"]

];

// data based for lower table
var salary = [
    ["1", "$320,800"],
    ["10", "$170,750"],
    ["20", "$86,000"],
    ["15", "$433,060"],
    ["11", "$162,700"],
    ["41", "$372,000"]
]

/* Put your css in here */

h1 {
  color: red !important;
  text-align: center;
}

table{
  width: 1024px !important;
}

.tablestyle{
  width: 1024px !important;
  border: 2px solid darkgray;
}
.dataTables_wrapper{
  width: 1024px !important; 
}

thead{
  background-color: rgb(200, 245, 245);
}