左侧列固定时,滚动HTML表水平和垂直

概述我正在尝试创建一个 HTML表格,其高度有限,左侧保持固定,同时水平滚动(并且表格主体可水平滚动)但在垂直滚动时不固定(左侧将可滚动与其余部分表). fixed scrollable 1 body content 2 body content 3 body content 4 body content . . . 我正在尝试创建一个 HTML表格,其高度有限,左侧保持固定,同时水平滚动(并且表格主体可水平滚动)但在垂直滚动时不固定(左侧将可滚动与其余部分表).

fixed    scrollable  1     body content  2     body content  3     body content  4     body content  .          .  .          .  .          .

我发现this solution然而,它只解决了水平滚动问题.在Eamon Nerbonne jsFiddle的例子中,增加一个高度：150px;到div将展示我试图解决的错误.

我想找到一个只涉及HTML和HTML的解决方案. CSS.

解决方法 在Eamon Nerbonne的 solution中添加另一个div,给了我以下解决方案：

jsFiddle

基本上解决方案是,如果你添加另一个父div来控制辅助div的流程可能会给你一个去.

<div >    <div >        <table>            <tr><td >1</td><td >QWERTYUIOPASDFGHJKLZXCVBNM</td><td >QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>            <tr><td >2</td><td >QWERTYUIOPASDFGHJKLZXCVBNM</td><td >QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>            <tr><td >3</td><td >QWERTYUIOPASDFGHJKLZXCVBNM</td><td >QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>            <tr><td >4</td><td >QWERTYUIOPASDFGHJKLZXCVBNM</td><td >QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>            <tr><td >5</td><td >QWERTYUIOPASDFGHJKLZXCVBNM</td><td >QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>            <tr><td >6</td><td >QWERTYUIOPASDFGHJKLZXCVBNM</td><td >QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>            <tr><td >7</td><td >QWERTYUIOPASDFGHJKLZXCVBNM</td><td >QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>            <tr><td >8</td><td >QWERTYUIOPASDFGHJKLZXCVBNM</td><td >QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>            <tr><td >9</td><td >QWERTYUIOPASDFGHJKLZXCVBNM</td><td >QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>        </table>    </div></div>

我为外部div添加了样式,如下所示：

div.first {    wIDth: auto;    overflow-y: scroll;    overflow-x: hIDden;    height: 150px;     /* this is the height that you expect to contain */          padding-bottom: 1px;    position: absolute;    left:0;    top:auto;}

总结

以上是内存溢出为你收集整理的左侧列固定时,滚动HTML表水平和垂直全部内容，希望文章能够帮你解决左侧列固定时,滚动HTML表水平和垂直所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。