<div class="table-scroll">
<table class="fixed-col-table">
<thead>
<tr>
<th>Employee</th>
<th>Department</th>
<th>Position</th>
<th>Email</th>
<th>Phone</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>Engineering</td>
<td>Frontend Dev</td>
<td>john@example.com</td>
<td>555-0101</td>
<td>Active</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>Marketing</td>
<td>Lead SEO</td>
<td>jane@example.com</td>
<td>555-0102</td>
<td>Active</td>
</tr>
<tr>
<td>Mike Ross</td>
<td>Legal</td>
<td>Associate</td>
<td>mike@example.com</td>
<td>555-0103</td>
<td>Leave</td>
</tr>
</tbody>
</table>
</div>
.table-scroll {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
overflow-x: auto;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
border: 1px solid #e5e7eb;
max-width: 600px;
margin: 0 auto;
}
.fixed-col-table {
width: 100%;
border-collapse: collapse;
min-width: 800px; /* Forces scroll on small screens */
}
th, td {
padding: 15px;
text-align: left;
border-bottom: 1px solid #f3f4f6;
background: #fff;
}
th {
background: #f9fafb;
font-weight: 600;
color: #374151;
}
/* Sticky Logic */
th:first-child,
td:first-child {
position: sticky;
left: 0;
z-index: 2;
background: #fff;
box-shadow: 2px 0 5px rgba(0,0,0,0.05);
}
th:first-child {
background: #f9fafb;
z-index: 3;
}
