Hey there! I've been trying to freeze the first column of my HTML table, and while I managed to do so after a few attempts, I encountered an issue. When I scroll the table horizontally, the columns on the left seem to overlap with the first column, and I can't figure out how to fix it. Could you lend me a hand with this? You can test it out using this CodePen.
CSS:
table {
width: 100%;
position: relative;
overflow: hidden;
display: block;
}
thead {
width: 100%;
display: block;
position: relative;
overflow: visible;
}
thead th:nth-child(1) {
position: relative;
display: block;
min-width:200px;
}
tbody {
width: 100%;
position: relative;
display: block;
max-height: 307px;
overflow: scroll;
}
tbody tr td:nth-child(1) {
position: relative;
display: block;
min-width:200px;
}
table th, table td {
min-width: 150px;
max-width: 150px;
padding: 2px 3px;
text-align: left;
text-overflow: ellipsis;
border: 1px solid #e1e1e1;
}
JS:
$(document).ready(function() {
$('tbody').scroll(function(e) {
$('thead').css("left", -$("tbody").scrollLeft());
$('thead th:nth-child(1)').css("left", $("tbody").scrollLeft());
$('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft());
});
});