1

我有这个例子，我想在不使用 JavaScript 或修改html代码的情况下垂直滚动冻结的列（我可以添加更多容器，bot 其他我不想更改的东西）。可能吗？

body { font:16px Calibri;}
table { border-collapse:separate; border-top: 3px solid grey; }
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:visible;
   padding-bottom:1px;
   height: 200px;
}
.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; }
<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>
    <tr><td class="headcol">10</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
    <tr><td class="headcol">11</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
    <tr><td class="headcol">12</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
    <tr><td class="headcol">13</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
    <tr><td class="headcol">14</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
</table></div>

4

1 回答 1

0

如果我理解得很好，您想滚动所有内容。
如果是这样，你必须删除.headcol类中的绝对定位
这意味着删除absolute，top并left从 css

要将其移回原位，请margin-left:5em;从divcss 中的元素中删除

于 2014-12-10T09:44:37.993 回答