css - dv 中的表 which cab 在 x 和 y 中滚动，当在 x 中滚动时，左标题列固定

Question

我希望此表的高度固定(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 轴上滚动

谢谢

Answer 1

我看到了问题，但我认为没有单表解决方案，而且我认为不使用 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>