I have a table with overflow-x enabled due to its length. The data at the start of each row gets hidden when scrolling horizontally, so I want to make at least one starting column sticky. I’ve tried several methods without success, even though I have successfully implemented this in another project.
I tried the following CSS and applied this class to the first td in both thead and tbody:
.fixed-cell {
position: sticky;
left: 0;
z-index: 2; // even tried 999
}
Then, I tried to dynamically add the CSS using jQuery like this:
<script>
$(document).ready(function () {
$('#candidateJobsListTable tbody tr').each(function () {
$(this).find('td:last-child').addClass('fixed-cell');
});
$('#candidateJobsListTable thead tr').each(function () {
$(this).find('th:last-child').addClass('fixed-cell');
});
});
</script>
In both cases, the CSS is being added, as verified in the console, but it’s not achieving the desired sticky behavior.
This is the table I’m using:
<div class="table-responsive scrollbar">
<table id="candidateJobsListTable" class="table table-striped table-sm fs-9 mb-0 overflow-hidden">
<thead>
<tr>
<th class="sort border-top border-translucent ps-3" data-sort="position_title"
style="min-width: 10rem;">Position Title
</th>
<th class="sort border-top" data-sort="company" style="min-width: 10rem;">Company</th>
<th class="sort border-top" data-sort="date" style="min-width: 5.5rem;">Date</th>
<th class="sort border-top" data-sort="location" style="min-width: 6rem;">Location</th>
<th class="sort border-top" data-sort="job_link" style="min-width: 5.5rem;">Job Link</th>
<th class="sort border-top" data-sort="salary_range" style="min-width: 9rem;">Salary Range
</th>
<th class="sort border-top" data-sort="status" style="min-width: 5.5rem;">Status</th>
<th class="sort border-top" data-sort="response" style="min-width: 5.5rem;">Response</th>
<th class="sort border-top" data-sort="applied_by" style="min-width: 6.5rem;">Applied By
</th>
<th class="sort border-top" data-sort="applied_at" style="min-width: 6.5rem;">Applied At
</th>
</th>
<th class="sort border-top" data-sort="applier_comments" style="min-width: 9.5rem;">Applier
Comments
</th>
</th>
<th class="sort border-top" data-sort="rating" style="min-width: 5rem;">Rating
</th>
</th>
<th class="sort border-top" data-sort="candidate_comments" style="min-width: 10rem;">
Candidate Comments
</th>
<th class="sort border-top" data-sort="feedback" style="min-width: 10rem;">
Interview Feedback
</th>
<th class="sort text-end align-middle pe-0 border-top" scope="col" id="jobsListAction">
ACTION</th>
</tr>
</thead>
<tbody class="list">
<?php
while ($result = mysqli_fetch_assoc($query_conn)) {
$id = $result['id'];
$position_title = $result['position_title'];
$company = $result['company'];
$location = $result['location'];
$job_link = $result['job_link'];
$salary = $result['salary'];
$status = $result['status'];
$response = $result['employer_response'];
$applied_by = $result['applied_by_name'];
$created_at = $result['created_at'];
$applied_at = $result['applied_at'];
$applier_comments = $result['applier_comments'];
$rating = $result['rating'];
$candidate_comments = $result['candidate_comments'];
$feedback = $result['feedback'];
$formattedCreatedAt = formatDate($created_at);
$formatted_applied_at = formatDate($applied_at);
?>
<tr>
<td class="align-middle ps-3 position_title">
<?php echo $position_title; ?>
</td>
<td class="align-middle company">
<?php echo $company; ?>
</td>
<td class="align-middle date">
<?php echo $formattedCreatedAt; ?>
</td>
<td class="align-middle location">
<?php echo $location; ?>
</td>
<td class="align-middle job_link">
<a href="<?php echo $job_link; ?>" target="_blank"><span
class="badge text-bg-primary">Open</span></a>
</td>
<td class="align-middle salary_range">
<?php echo $salary; ?>
</td>
<td class="align-middle status">
<?php if ($status === 'pending'): ?>
<span class="badge badge-phoenix badge-phoenix-info">Pending</span>
<?php elseif ($status === 'applied'): ?>
<span class="badge badge-phoenix badge-phoenix-success">Applied</span>
<?php elseif ($status === 'not applicable'): ?>
<span class="badge badge-phoenix badge-phoenix-danger">Not applicable</span>
<?php elseif ($status === 'under review'): ?>
<span class="badge badge-phoenix badge-phoenix-warning">Under Review</span>
<?php endif; ?>
</td>
<td class="align-middle response">
<?php if ($response === 'pending'): ?>
<span class="badge badge-phoenix badge-phoenix-secondary">Pending</span>
<?php elseif ($response === 'accepted'): ?>
<span class="badge badge-phoenix badge-phoenix-success">Accepted</span>
<?php elseif ($response === 'rejected'): ?>
<span class="badge badge-phoenix badge-phoenix-danger">Rejected</span>
<?php elseif ($response === 'interview'): ?>
<span class="badge badge-phoenix badge-phoenix-primary">Interview</span>
<?php endif; ?>
</td>
<td class="align-middle applied_by">
<?php
if (empty($applied_by)):
echo "N/A";
else:
echo $applied_by;
endif;
?>
</td>
<td class="align-middle applied_at">
<?php
if (empty($applied_at)):
echo "N/A";
else:
echo $formatted_applied_at;
endif;
?>
</td>
<td class="align-middle applier_comments">
<?php
if (empty($applier_comments)):
echo "N/A";
else:
echo $applier_comments;
endif;
?>
</td>
<td class="align-middle rating">
<?php
if (empty($rating)):
echo "N/A";
else:
if ($rating > 7):
echo "<span class='badge badge-phoenix badge-phoenix-success'>$rating</span>";
elseif ($rating > 5):
echo "<span class='badge badge-phoenix badge-phoenix-info'>$rating</span>";
elseif ($rating > 3):
echo "<span class='badge badge-phoenix badge-phoenix-warning'>$rating</span>";
else:
echo "<span class='badge badge-phoenix badge-phoenix-danger'>$rating</span>";
endif;
endif;
?>
</td>
<td class="align-middle candidate_comments">
<?php
if (empty($candidate_comments)):
echo "N/A";
else:
echo $candidate_comments;
endif;
?>
</td>
<td class="align-middle feedback">
<?php
if (empty($feedback)):
echo "N/A";
else:
echo $feedback;
endif;
?>
</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static">
<button
class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10"
type="button" data-bs-toggle="dropdown" data-boundary="window"
aria-haspopup="true" aria-expanded="false" data-bs-reference="parent">
<span class="fas fa-ellipsis-h fs-10"></span>
</button>
<div class="dropdown-menu dropdown-menu-end py-2">
<a class="dropdown-item text-success" href="javascript:void(0)"
data-bs-toggle="modal" data-bs-target="#applyJobModal"
data-applier="<?php echo $_SESSION['id']; ?>" data-job="<?php echo $id; ?>"
data-candidate="<?php echo $candidate_id; ?>">Apply</a>
<a class="dropdown-item" href="javascript:void(0)" data-bs-toggle="modal"
data-bs-target="#jobResponseModal" data-job="<?php echo $id; ?>"
data-candidate="<?php echo $candidate_id; ?>">Response</a>
<a class="dropdown-item"
href="update_job.php?c_id=<?php echo $candidate_id; ?>&j_id=<?php echo $id; ?>">Update</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item text-danger" href="javascript:void(0)" id="removeJobBtn"
data-job="<?php echo $id; ?>"
data-candidate="<?php echo $candidate_id; ?>">Remove</a>
</div>
</div>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
And these are the libraries I’m using:
<script src="vendors/bootstrap/bootstrap.min.js"></script>
<script src="vendors/list.js/list.min.js"></script>