<div class="table-wrapper">
  <table class="sticky-table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Role</th>
        <th>Email</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>Jane Doe</td><td>Developer</td><td>jane@example.com</td><td>Active</td></tr>
      <tr><td>John Smith</td><td>Designer</td><td>john@example.com</td><td>Active</td></tr>
      <tr><td>Sam Wilson</td><td>Manager</td><td>sam@example.com</td><td>Away</td></tr>
      <tr><td>Alice Cooper</td><td>Support</td><td>alice@example.com</td><td>Offline</td></tr>
      <!-- Add more rows to see effect -->
    </tbody>
  </table>
</div>

.table-wrapper {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}
.sticky-table {
  width: 100%;
  border-collapse: collapse;
}
.sticky-table th {
  position: sticky;
  top: 0;
  background: #f9fafb;
  color: #374151;
  font-weight: 600;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 2px solid #e5e7eb;
  z-index: 10;
}
.sticky-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #f3f4f6;
  color: #4b5563;
}
.sticky-table tr:last-child td {
  border-bottom: none;
}