我一直在努力解决一个问题，即在水平滚动时使表的列标题与主体一起滚动，而在垂直滚动时使第一列与行一起滚动。我发现解决方案非常接近，但要么使用CoffeeScript和Pug，要么在页面上有多个表时不起作用。 http://jsfiddle.net/software_christian/Fp9a3/8/的How can I lock the first row and first column of a table when scrolling, possibly using JavaScript and CSS?这个小提琴示例是我正在寻找的预期行为，但似乎无法使其在小提琴，codepen.io或我正在开发的环境中正常工作。我发现了其他解决方案似乎有些工程过度（针对Large dynamically sized html table with a fixed scroll row and fixed scroll column的解决方案）
此外，当我将页面/标签放在显示器上而不是在实际的Mac屏幕上时，我正在使用的当前代码有效。有谁知道这里发生了什么，有人可以通过使用JQuery，JS和/或CSS和HTML的简单动态解决方案来帮助我吗？我也在尝试维护表的标准HTML结构：
理想的HTML格式： （理想情况下，除非我给它一个唯一的类，例如“ scroll-table”，否则我希望表保持标准状态（而不是滚动））
下面的代码段是我目前为止的内容。
$(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>
答案 0 :(得分：0)
因此，我决定从头开始，最终能够在单个页面上编写适用于多个表的内容，并且只需要在主表容器中应用单个类即可获得所需的结果。这是代码：
JS-
$(document).ready(function() {
var wrapper = document.getElementsByClassName('scroll-table-1');
for (var i = 0; i < wrapper.length; i++) {
wrapper[i].addEventListener('scroll', function (e) {
var table = this.closest('table');
var headerRow = table.querySelector('thead');
var firstCol = table.querySelectorAll('tbody tr td:first-child');
var topLeftCorner = table.querySelector('thead th:first-child');
headerRow.setAttribute('style','top:' + this.scrollTop + 'px');
topLeftCorner.setAttribute('style','left:' + this.scrollLeft + 'px');
firstCol.forEach((n) => {
n.setAttribute('style','left:' + this.scrollLeft + 'px');
});
});
};
});
CSS：
.scroll-table-1 {
position: relative;
display: block;
width: auto;
height: 350px;
overflow: scroll;
}
.scroll-table-1 thead {
position: relative;
display: block;
width: auto;
overflow: visible;
}
.scroll-table-1 tbody td {
background-color: #bbc;
min-width: 154px;
border: 1px solid #222;
display: table-cell;
}
.scroll-table-1 tbody tr td:nth-child(1) {
position: relative;
display: table-cell;
background-color: #99a;
min-width: 154px;
max-width: 154px;
z-index: 10;
}
.scroll-table-1 thead th {
background-color: #99a;
min-width: 154px;
border: 1px solid #222;
word-break: break-word;
z-index: 15;
}
.scroll-table-1 thead th:nth-child(1) {
position: relative;
display: table-cell;
background-color: #88b;
min-width: 154px;
max-width: 154px;
z-index: 100;
}
奇怪的是，当我在显示器上滚动时，它可以完美流畅地工作，但是由于某些原因，当我将窗口拖动到Mac屏幕上时，滚动会变得有些抖动/跳跃。我不知道是什么原因造成的，我也不认为这是有道理的，但是它可以工作，所以我现在就考虑。如果有人对为什么发生这种奇怪的显示更改行为有一个解释，我很想听听.....