Question

我试图制作一个水平滚动表，但我能够制作它，但只修复了第一列。我需要修复两列或更多列的滚动表。

以下是小提琴here

的链接

我想让这个表滚动两个或两个以上的列进行修复并重新滚动。是否可以创建一个CSS类（例如“fixedColumn”），以便修复具有此CSS类的任何列，其余列是否滚动？我不能使用任何JavaScript插件（根本没有JS）。

请帮忙。

HTML

<div class="table-wrapper">
    <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>

        <tr>
            <th>...</th>
            <td>...</td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
    </tbody>
</table>

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;
}

Answer 1

只要您的表具有固定宽度，您就可以执行以下操作：

td:nth-child(3) {
    position: fixed;
    left: 160px;
    width:100px;
}

当然，您需要根据要保留在固定位置的列调整left和width属性以及nth-child，但您会明白这一点。话虽如此，我会尝试使用div而不是表格，对于像这样的实例来说，它更易于管理

水平滚动表：多个固定列

1 个答案: