Question

我有一个带有固定列的表，我需要添加jscrollpane来设置滚动条的样式。

以下是HTML代码

<div class="table-wrapper scroll-pane">
    <table id="consumption-data" class="data ">
        <thead class="header">
            <tr>
                <th>Month</th>
                <th>Item 1</th>
                <th>Item 2</th>
                <th>Item 3</th>
                <th>Item 4</th>
            </tr>
        </thead>
        <tbody class="results">
            <tr>
                <th>Jan</th>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
            </tr>
            <tr>
                <th>Feb</th>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
            </tr>
            <tr>
                <th>Mar</th>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
            </tr>
            <tr>
                <th>Apr</th>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>  
            </tr>
            <tr>    
                <th>May</th>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
            </tr>
            <tr>
                <th>Jun</th>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
            </tr>


        </tbody>
    </table>
</div>

CSS

.table-wrapper { 
    overflow-x:scroll;
    overflow-y:visible;
    width:250px;
    margin-left: 120px;
}


td, th {
    padding: 5px 20px;
    width: 100px;
}

th:first-child {
    position: absolute;
    left: 5px
}

This is the jScrollpane plugin im using

问题是当我添加jScrollpane插件时，第一列重叠并与滚动条一起移动

My jSfiddle

有人能告诉我如何将第一列向左移动并使用此插件修复

Answer 1

从您的css中删除此块

th:first-child {
position: absolute;
left: 5px

}

它的绝对位置:) 现在检查你的更新小提琴。

***编辑：使用位置固定。

链接已编辑

fiddle

Answer 2

添加位置：相对;与包装器一起添加位置：固定;你的第一个孩子很好地解决了这个问题，并将第一列固定在一边而没有以下列重叠。

 .table-wrapper { 
    overflow-x:scroll;
    overflow-y:visible;
    width:250px;
    margin-left: 120px;
    position:relative;
}


td, th {
    padding: 5px 20px;
    width: 100px;
}

th:first-child {
    position: fixed;
    left: 5px
}

这是一个边距/宽度较小的jsfiddle，可以更清楚地看到效果：

CODEPEN

使用jScrollPane时，固定列重叠表列

2 个答案: