Sticky First Column Table CSS (Code Snippet)

<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;
}

Sticky First Column Table CSS

Share Code Snippet