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

问题描述：

我正在尝试创建一个 HTML 表，其高度限制，左侧保持固定，同时水平滚动（和表格body可以水平滚动）但在垂直滚动时不固定（左侧可以与表的其余部分一起滚动）。

I'm trying to create an HTML table where its height is limited and the left side stay fixed while scrolling horizontally (and the table body is scrollable horizontally) but not fixed while scrolling vertically (the left side will be scrollable with the rest of the table).

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

我发现 此解决方案 但是，它只解决水平滚动问题。在 Eamon Nerbonne jsFiddle 示例中，添加一个高度：150px; 到div将演示我想要解决的错误。

I found this solution however, it only addresses an horizontal scrolling. In Eamon Nerbonne jsFiddle example, adding a height: 150px; to the div will demonstrate the bug I'm trying to solve.

我是喜欢找到只涉及HTML& CSS。

I'd like to find a solution that involve only HTML & CSS.

答

在Eamon Nerbonne的解决方案，给了我以下解决方案：

Adding another div to the Eamon Nerbonne's solution, gave me the following solution:

jsFiddle

基本上解决方法是，如果添加另一个父div来控制辅助流的流量div可能会给你一个机会。

Basically the solution is, if you add another parent div that controls the flow of the secondary div might give you a go.

<div class="first">
    <div class="second">
        <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>
</div>

我为外部div添加了这样的样式：

I added style for the outer div like this:

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表水平和垂直

相关推荐