html – 水平滚动表：多个固定列

概述我试图制作一个水平滚动表,我能够制作它,但只有第一列是固定的.我需要修复两个或更多列的滚动表. 这是小提琴here的链接 我想让这个表滚动两个或两个以上的列固定并休息滚动.是否可以创建一个CSS类(例如“fixedColumn”),以便修复具有此CSS类的任何列,其余列是否滚动？我不能使用任何JavaScript插件(根本没有JS). 请帮忙. HTML <div class="table-wra 我试图制作一个水平滚动表,我能够制作它,但只有第一列是固定的.我需要修复两个或更多列的滚动表.

这是小提琴here的链接

我想让这个表滚动两个或两个以上的列固定并休息滚动.是否可以创建一个CSS类(例如“fixedColumn”),以便修复具有此CSS类的任何列,其余列是否滚动？我不能使用任何JavaScript插件(根本没有Js).

请帮忙.

HTML

<div >    <table ID="consumption-data" >        <thead >            <tr>                <th>Month</th>                <th>Item 1</th>                <th>Item 2</th>                <th>Item 3</th>                <th>Item 4</th>            </tr>        </thead>        <tbody >            <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;}

解决方法 只要您的表具有固定宽度,您可以执行以下 *** 作：

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

当然你需要调整左边和宽度属性,并根据要保留在固定位置的列来调整nth-child,但是你会明白这一点.话虽如此,我尝试使用div而不是表格,对于像这样的实例来说,它更易于管理

总结

以上是内存溢出为你收集整理的html – 水平滚动表：多个固定列全部内容，希望文章能够帮你解决html – 水平滚动表：多个固定列所遇到的程序开发问题。

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