After extensive effort, I have been diligently striving to create a solution that allows a table's column headers to scroll with the body horizontally and the first column to scroll with the rows vertically. While I've come across solutions that are close, they either rely on CoffeeScript and Pug or fail when there is more than one table on the page. The behavior demonstrated in this fiddle example from software_christian is exactly what I'm aiming for but unfortunately, I can't seem to replicate it in my development environment using tools like fiddle or codepen.io. Other solutions I've encountered appear to be overly complex.
In addition, the current code I'm utilizing works fine when the page is viewed on my monitor, but encounters issues when displayed on my Mac screen. I'm seeking assistance in devising a straightforward dynamic solution leveraging JQuery, JS, CSS, and HTML to resolve this predicament while adhering to the standard HTML structure of a table.
Ideal HTML Format: (Ideally, I would like a table to remain standard (not scroll) unless I give it a unique class such as "scroll-table")
The following snippets showcase the progress I've made thus far.
$(document).ready(function() {
$('.scroll-table tbody').scroll(function(e) { //detect a scroll event on the tbody
$(this).siblings('thead').css("left", -$(this).scrollLeft()); scrolling
$(this).siblings().children().children().css("left", $(this).scrollLeft());
$(this).children().children().css("left", $(this).scrollLeft());
});
});.scroll-table {
position: relative;
background-color: #aaa;
overflow: hidden;
border-collapse: collapse;
}
.scroll-table thead {
position: relative;
display: block;
width: auto;
overflow: visible;
}
.scroll-table thead th {
background-color: #99a;
min-width: 154px;
border: 1px solid #222;
word-break: break-word;
}
.scroll-table thead th:nth-child(1) {
position: relative;
display: table-cell;
background-color: #88b;
min-width: 154px;
max-width: 154px;
}
.scroll-table tbody {
position: relative;
display: block;
width: auto;
height: 239px;
overflow: scroll;
}
.scroll-table tbody td {
background-color: #bbc;
min-width: 154px;
border: 1px solid #222;
}
.scroll-table tbody tr td:nth-child(1) {
position: relative;
display: block;
height: auto;
background-color: #99a;
min-width: 154px;
max-width: 154px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table class="scroll-table">
<thead>
<tr>
<th>Name</th>
<th>Town</th>
<th>County</th>
<th>Age</th>
<th>Profession</th>
<th>Anual Income</th>
<th>Matital Status</th>
<th>Children</th>
<th>Annual Income</th>
<th>Marital Status</th>
<th>Cranes</th>
<th>Bends</th>
</tr>
</thead>
<tbody>
<tr>
<!-- Table data goes here -->
</tr>
</</table>