<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mobile Data Table</title>

    <!-- Include DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">

    <!-- Include jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <!-- Include DataTables JS -->
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>

    <!-- Make table responsive -->
    <style>
        @media only screen and (max-width: 600px) {
            table.dataTable {
                width: 100% !important;
            }
        }
    </style>
</head>
<body>

    <table id="myDataTable" class="display">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>City</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John Doe</td>
                <td>25</td>
                <td>New York</td>
            </tr>
            <!-- Add more rows as needed -->
        </tbody>
    </table>

    <script>
        // Initialize DataTable
        $(document).ready(function () {
            $('#myDataTable').DataTable();
        });
    </script>

</body>
</html>
