html - 水平滚动表 : multiple fixed columns

Question

我试图制作一个水平滚动的表格并且我能够制作它但只有第一列是固定的。我需要固定两列或更多列的滚动表。

这是 fiddle 的链接 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 属性，并根据你想保持在固定位置的列调整第 n 个子元素，但是你会明白的。这就是说，我会尝试使用 div 而不是表格，对于这样的实例来说它更易于管理