我希望此表的高度固定(http://jsfiddle.net/emn13/YMvk9/),以便在向其中添加更多行时,我可以在 y 轴上滚动,并且随着每一行向上移动,左侧固定行列应该滚动。
<div><table>
<tr><td class="headcol">1</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
<tr><td class="headcol">2</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
<tr><td class="headcol">3</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
<tr><td class="headcol">4</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
<tr><td class="headcol">5</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
<tr><td class="headcol">6</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
<tr><td class="headcol">7</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
<tr><td class="headcol">8</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
<tr><td class="headcol">9</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
</table></div>
CSS 如下
body { font:16px Calibri;}
table { border-collapse:separate; border-top: 3px solid grey; height:100px;}
td {
margin:0;
border:3px solid grey;
border-top-width:0px;
white-space:nowrap;
}
div {
width: 600px;
overflow-x:scroll;
margin-left:5em;
overflow-y:scroll;
padding-bottom:1px;
}
.headcol {
position:absolute;
width:5em;
left:0;
top:auto;
border-right: 0px none black;
border-top-width:3px; /*only relevant for first row*/
margin-top:-3px; /*compensate for top border*/
}
.headcol:before {content: 'Row ';}
.long { background:yellow; letter-spacing:1em; }
上面的代码来自另一个问题的答案,它通过保持左行标题固定解决了我的问题一半,但我也想在 y 轴上滚动
谢谢
最佳答案
我看到了问题,但我认为没有单表解决方案,而且我认为不使用 JavaScript 无法实现该效果。
这是一个包含两个表的 JavaScript 解决方案。我将每个表放在一个 div
中。当您滚动第二个表格时,第一个表格将滚动相同的量。
var c1= document.getElementById('container1');
var c2= document.getElementById('container2');
c2.onscroll= function() {
c1.scrollTop= c2.scrollTop;
}
.long {
background:yellow;
letter-spacing:1em;
}
table {
border-spacing:0px;
}
#container1 {
float: left;
width: 5em;
height: 150px;
overflow-x: scroll;
overflow-y: hidden;
}
#container2 {
width: 30em;
height: 150px;
overflow: auto;
}
#container1 tr, #container2 tr {
height: 1.5em;
}
#container1 table, #container2 table {
width: 100%;
}
td {
border: 1px solid #ddd;
}
<div id="container1">
<table>
<tr><td>Row 1
<tr><td>Row 2
<tr><td>Row 3
<tr><td>Row 4
<tr><td>Row 5
<tr><td>Row 6
<tr><td>Row 7
<tr><td>Row 8
<tr><td>Row 9
<tr><td>Row 10
<tr><td>Row 11
<tr><td>Row 12
<tr><td>Row 13
<tr><td>Row 14
<tr><td>Row 15
<tr><td>Row 16
<tr><td>Row 17
<tr><td>Row 18
<tr><td>Row 19
<tr><td>Row 20
</table>
</div>
<div id="container2">
<table>
<tr><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM
<tr><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM
<tr><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM
<tr><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM
<tr><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM
<tr><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM
<tr><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM
<tr><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM
<tr><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM
<tr><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM
<tr><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM
<tr><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM
<tr><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM
<tr><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM
<tr><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM
<tr><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM
<tr><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM
<tr><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM
<tr><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM
<tr><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM
</table>
</div>
关于css - dv 中的表 which cab 在 x 和 y 中滚动,当在 x 中滚动时,左标题列固定,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27432805/