Responsive Table — Scroll on Mobile

<div class="table-wrap" tabindex="0" role="region" aria-label="User list">
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
                <th>Role</th>
                <th>Last sign-in</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Alice Example</td>
                <td>alice@example.com</td>
                <td>Admin</td>
                <td>2 hours ago</td>
                <td>Active</td>
            </tr>
        </tbody>
    </table>
</div>

<style>
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}
.table-wrap:focus { outline: 2px solid #3b82f6; outline-offset: 2px; }
table { width: 100%; border-collapse: collapse; min-width: 600px; }
th, td { padding: 10px 14px; text-align: left; }
tbody tr:nth-child(even) { background: #f9fafb; }
</style>