html表格的列并列,纯html+css固定表格一列或多列，其余进行横向滚动的方法-鹏仔先生...

纯html+css固定表格一列或多列，其余进行横向滚动的方法

工作时候，遇到一个需求，表格的前两列固定不动，其他的跟随滚动条滚动，并没有在意，想起来很简单，刚开始想法是前两列absolute定位，后面的relative定位并给left值为前面的总宽度，就这样做了，发现是有问题的，具体啥问题就不多说了，如真想研究，自己尝试吧。

当然，网上有很多插件的，比较好用，也建议大家使用插件吧，如TableFreeze-master

插件下载

蓝奏网盘：点击下载

下面给大家分享一下我的另个想法，纯html+css实现：

就用固定一列做个简单的demo，外面最大的盒子“layer-box”加定位relative,里面的盒子“layer”加滚动条，接下来就是表格的样式了，给第一列“td-1”需要固定的添加定位absolute，并设置固定宽度，z-index属性，那么他就默认定位到起始位置了。接下来是重点，我们需要多加一列来占位，“

”中的div设置需要固定的第一列的宽度，如设有边框，记得减掉，通过他占位，将后面所有的列都向后挤了一定的距离，就好了，大体思路就是这样。

如果固定两列，那么第二列的left值等于第一列的宽度，占位的宽度等于前面所有固定列的宽度和即可。

当然，你也可以让最后一列或多列固定，方法一样，给最后一列的前一列进行占位，思路相反想一下。

附完整demo

固定第一列

*{

margin: 0;

padding: 0;

}

body{

padding: 100px;

box-sizing: border-box;

}

table{

border-collapse: collapse;

}

td,th{

color: #333;

font-size: 14px;

border-right: 1px solid #333;

line-height: 30px;

box-sizing: border-box;

white-space: nowrap;

background: #fff;

}

.layer-box{

width: 700px;

overflow: hidden;

position: relative;

border: 1px solid #000;

}

.layer{

width: 700px;

overflow: hidden;

overflow-x: scroll;

}

.td-1{

position: absolute;

left: 0;

z-index: 2;

width: 150px;

}

.zhanwei{

width: 149px;

}

table tr:nth-child(odd) td,

table tr:nth-child(odd) th{

background: #f7f8f9;

}

我是第一个		我是第二个	我是第三个	我是第四个	我是第五个	我是第六个	我是第七个	我是第八个	我是第九个	我是第十个
我是第一个		我是第二个	我是第三个	我是第四个	我是第五个	我是第六个	我是第七个	我是第八个	我是第九个	我是第十个
我是第一个		我是第二个	我是第三个	我是第四个	我是第五个	我是第六个	我是第七个	我是第八个	我是第九个	我是第十个
我是第一个		我是第二个	我是第三个	我是第四个	我是第五个	我是第六个	我是第七个	我是第八个	我是第九个	我是第十个