i want to change the style of datatable

i have a datatable.its looks very bad. i want to change the style and pagination style.anybody knows please help me am attaching the code and current view of my datatable Now the datatable have no good style. looking very old. anybody can help me to chnage the style,then please help me my code index.php

<head>
    <link   type="text/css"  href="css/jquery-ui.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/jquery.dataTables.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" language="javascript" src="css/jquery.dataTables.min.js"></script>
    <script type="text/javascript" language="javascript" src="css/jquery-ui.js"></script>

</head>

<body>
    <form id="mytable">
        <div class="container">

            <table border="0" cellspacing="5" cellpadding="5">
                <tbody>
                    <tr>
                        <td>Minimum Date:</td>
                        <td><input name="min" id="min" type="text" class="datepicker" ></td>
                    </tr>
                    <tr>
                        <td>Maximum Date:</td>
                        <td><input name="max" id="max" type="text" class="datepicker" ></td>
                    </tr>
                </tbody>
            </table>


            <table id="employee-grid"  cellpadding="0" cellspacing="0" border="0" class="display" width="100%">
                <thead>





                    <tr>
                        <th>ID</th>
                        <th>TIME</th>
                        <th>COMPUTER NAME</th>
                        <th>USER</th>
                    </tr>
                </thead>
            </table>




        </div>
    </form>
</body>

<script>
    $(document).ready(function () {

        var dataTable = $('#employee-grid').DataTable({
            "processing": true,
            "serverSide": true,
            "ajax": {
                url: "employee-grid-data.php", // json datasource
                data :function(data){
                    data.min = $('#min').val(),
                    data.max = $('#max').val()
                }

            },
            "columns": [
                { "data": "id" },
                { "data": "datetimes" },
                { "data": "computer_name" },
                { "data": "user" },
             ]
        });

$('#min').change(function(){
      dataTable.draw() ;
})
$('#max').change(function(){
      dataTable.draw() ;
})
        $('.datepicker').datepicker({
            autoclose: true,
            format: "yyyy-mm-dd",
            todayHighlight: true,
            orientation: "top auto",
            todayBtn: true,
            todayHighlight: true,
        });




    });

//    
</script>

employeegrid.php

<?php
ini_set('display_errors',1);

/* Database connection start */
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "my_db";

$conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error());

/* Database connection end */


// storing  request (ie, get/post) global array to a variable  
$requestData= $_REQUEST;


$columns = array( 
// datatable column index  => database column name
    0 =>'id', 
    1 => 'datetimes',
    2=> 'computer_name',
    3=> 'user'
);

// getting total number records without any search
$sql = "SELECT id, datetimes, computer_name,user FROM my_table";
$query=mysqli_query($conn, $sql) or die("employee-grid-data.php: get my_table");

$totalData = mysqli_num_rows($query);

$totalFiltered = $totalData;  // when there is no search parameter then total number rows = total number filtered rows.


if((!empty($requestData['min'])) && (!empty($requestData['max']))){
    $minimum_date= date('Y-m-d',strtotime($requestData['min'])); 
    $maximum_date=date('Y-m-d',strtotime($requestData['max'])); 
     $sql.=" where DATE(datetimes)>='".$minimum_date."' AND  DATE(datetimes)<='".$maximum_date."' ";    


}

$query=mysqli_query($conn, $sql) or die("employee-grid-data.php: get my_table");

$data = array();
$i = 0;
while( $row=mysqli_fetch_assoc($query) ) {  // preparing an array
    $nestedData=array(); 
        $nestedData['id'] = $row["id"];
    $nestedData['datetimes'] = date('Y-m-d',strtotime($row["datetimes"])); ;
    $nestedData['computer_name'] = $row["computer_name"];
    $nestedData['user'] = $row["user"];

    $data[] = $nestedData;
}



$json_data = array(
            "draw"            => intval( $requestData['draw'] ),   // for every request/draw by clientside , they send a number as a parameter, when they recieve a response/data they first check the draw number, so we are sending same number in draw. 
            "recordsTotal"    => intval( $totalData ),  // total number of records
            "recordsFiltered" => intval( $totalFiltered ), // total number of records after searching, if there is no searching then totalFiltered = totalData
            "data"            => $data   // total data array
            );

echo json_encode($json_data);  // send data as json format

?>

Solution

These are the css selectors you should apply the styles on to your desired design.

table header

 table>thead>tr>th{
    your styling
    }

pagination

.dataTables_paginate{

styles
}

pagination links

.dataTables_paginate a {
    padding: 6px 9px !important;
    background: #ddd !important;
    border-color: #ddd !important;
}

if you using bootstrap you might also need to modify bootstrap.min.css line :3936

.pagination>li>a, .pagination>li>span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #337ab7;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
    }