I have been painstakingly working on a solution to have a table's column headers scroll with the body when scrolling horizontally and have the first column scroll with the rows when scrolling vertically. I have found solutions that are very close but either use CoffeeScript and Pug or don't work if there is more than one table on the page. This fiddle example http://jsfiddle.net/software_christian/Fp9a3/8/ from How can I lock the first row and first column of a table when scrolling, possibly using JavaScript and CSS? is the intended behavior I am looking for but can't seem to get it working in fiddle, codepen.io or the environment I am developing in. Other solutions I have found that somewhat work seem over-engineered (accepted solution for Large dynamically sized html table with a fixed scroll row and fixed scroll column)
Furthermore, the current code I am using works when I put the page/tab on my monitor but not on my actual mac screen. Does anyone know what is going on here and could someone please help me out with a simple dynamic solution using either JQuery, JS, and/or CSS and HTML to solve this problem? I am also trying to maintain 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 below snippets are what I currently have so 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>
<td>John Smith</td>
<td>Macelsfield</td>
<td>Cheshire</td>
<td>52</td>
<td>Brewer</td>
<td>£47,000</td>
<td>Married</td>
<td>2</td>
<td>All</td>
<td>Work</td>
<td>and</td>
<td>no</td>
</tr>
<tr>
<td>Jenny Jones</td>
<td>Threlkeld</td>
<td>Cumbria</td>
<td>34</td>
<td>Shepherdess</td>
<td>£28,000</td>
<td>Single</td>
<td>0</td>
<td>play</td>
<td>makes</td>
<td>Jack</td>
<td>a</td>
</tr>
<tr>
<td>Peter Frampton</td>
<td>Avebury</td>
<td>Wiltshire</td>
<td>57</td>
<td>Musician</td>
<td>£124,000</td>
<td>Married</td>
<td>4</td>
<td>dull</td>
<td>boy</td>
<td>All </td>
<td>work</td>
</tr>
<tr>
<td>Simon King</td>
<td>Malvern</td>
<td>Worchestershire</td>
<td>48</td>
<td>Naturalist</td>
<td>£65,000</td>
<td>Married</td>
<td>2</td>
<td>and</td>
<td>no</td>
<td>play</td>
<td>makes</td>
</tr>
<tr>
<td>Lucy Diamond</td>
<td>St Albans</td>
<td>Hertfordshire</td>
<td>67</td>
<td>Pharmasist</td>
<td>Retired</td>
<td>Married</td>
<td>3</td>
<td>Jack</td>
<td>a</td>
<td>dull</td>
<td>boy</td>
</tr>
<tr>
<td>Austin Stevenson</td>
<td>Edinburgh</td>
<td>Lothian</td>
<td>36</td>
<td>Vigilante</td>
<td>£86,000</td>
<td>Single</td>
<td>Unknown</td>
<td>All </td>
<td>work</td>
<td>and</td>
<td>no</td>
</tr>
<tr>
<td>Wilma Rubble</td>
<td>Bedford</td>
<td>Bedfordshire</td>
<td>43</td>
<td>Housewife</td>
<td>N/A</td>
<td>Married</td>
<td>1</td>
<td>play</td>
<td>makes</td>
<td>Jack</td>
<td>a</td>
</tr>
<tr>
<td>Kat Dibble</td>
<td>Manhattan</td>
<td>New York</td>
<td>55</td>
<td>Policewoman</td>
<td>$36,000</td>
<td>Single</td>
<td>1</td>
<td>dull</td>
<td>boy</td>
<td>All</td>
<td>work</td>
</tr>
<tr>
<td>Henry Bolingbroke</td>
<td>Bolingbroke</td>
<td>Lincolnshire</td>
<td>45</td>
<td>Landowner</td>
<td>Lots</td>
<td>Married</td>
<td>6</td>
<td>and</td>
<td>no</td>
<td>play</td>
<td>makes</td>
</tr>
<tr>
<td>Alan Brisingamen</td>
<td>Alderley</td>
<td>Cheshire</td>
<td>352</td>
<td>Arcanist</td>
<td>A pile of gems</td>
<td>Single</td>
<td>0</td>
<td>Jack</td>
<td>a</td>
<td>dull</td>
<td>boy</td>
</tr>
</tbody>
</table>