Set width: full 320 480 640 768 1024 1920 custom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Table</title>
<style>
body { font-family: Arial, sans-serif; margin: 0; padding: 2rem; background: #f7f7f7; }
.table-container {
max-width: 900px;
margin: 0 auto;
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0,0,0,0.07);
padding: 1.5rem;
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
min-width: 600px;
}
th, td {
padding: 0.75rem 1rem;
border-bottom: 1px solid #eee;
text-align: left;
white-space: nowrap;
}
th {
background: #f0f4f8;
font-weight: bold;
}
tr:last-child td {
border-bottom: none;
}
@media (max-width: 700px) {
.table-container {
padding: 1rem;
}
table {
min-width: 400px;
}
}
@media (max-width: 500px) {
.table-container {
padding: 0.5rem;
}
table {
min-width: 300px;
}
th, td {
padding: 0.5rem 0.5rem;
}
}
</style>
</head>
<body>
<div class="table-container">
<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Role</th>
<th>Status</th>
<th>Joined</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice Smith</td>
<td>alice@example.com</td>
<td>Admin</td>
<td>Active</td>
<td>2024-01-15</td>
</tr>
<tr>
<td>Bob Johnson</td>
<td>bob@example.com</td>
<td>User</td>
<td>Inactive</td>
<td>2023-11-02</td>
</tr>
<tr>
<td>Carol Lee</td>
<td>carol@example.com</td>
<td>Editor</td>
<td>Active</td>
<td>2024-03-10</td>
</tr>
<tr>
<td>David Kim</td>
<td>david@example.com</td>
<td>User</td>
<td>Active</td>
<td>2024-04-22</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>