CSS RESPONSIVE TABLE

If you want a responsive HTML/CSS table that works well on mobile, a common approach is horizontal scrolling:

<div class="table-wrapper">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Role</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ali Khan</td>
        <td>ali@example.com</td>
        <td>Admin</td>
        <td>Active</td>
      </tr>
      <tr>
        <td>Sarah Ahmed</td>
        <td>sarah@example.com</td>
        <td>User</td>
        <td>Active</td>
      </tr>
    </tbody>
  </table>
</div>

.table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
}

th,
td {
  padding: 12px 16px;
  border: 1px solid #ddd;
  text-align: left;
  white-space: nowrap;
}

th {
  background: #f5f5f5;
}

/* Mobile */
@media (max-width: 600px) {
  th,
  td {
    padding: 10px 12px;
    font-size: 14px;
  }
}

Why this works

• Desktop: table uses the available width.
• Mobile: table can scroll horizontally instead of breaking the layout.
• min-width: 600px prevents columns from becoming unreadably narrow.
• overflow-x: auto keeps the page itself from overflowing.

If you want, I can also give you a CSS-only responsive table that turns each row into a mobile card instead of horizontal scrolling.