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;

}

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

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

纯html+css固定表格一列或多列，其余进行横向滚动的方法-鹏仔先生
纯html+css固定表格一列或多列,其余进行横向滚动的方法工作时候,遇到一个需求,表格的前两列固定不动,其他的跟随滚动条滚动,并没有在意,想起来很简单,刚开始想法是前两列absolute定位,后面 ...
css固定表格表头(各浏览器通用)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
html css 表头,css固定表格表头(各浏览器通用)
固定表格表头 div{ overflow-y: scroll; overflow-x: hidden; height: 100px; margin-top: 5px; margin-left: 12p ...
2022-11 CSS：flex布局父子宽度问题-小程序scrollView-div横向滚动字体超出隐藏-居中
1.父盒子不限制宽度,子盒子跟随子盒子最长长度如上图第二行子元素宽度会跟随第一行宽度解决方案: 对第二行设置:width: max-content; 使其宽度跟随自身内容 2.flex布局时,挤压 ...
css table表格相关设置和属性
css table表格相关设置和属性文章目录 css table表格相关设置和属性前言一.表格结构二.使用行内样式控制表格样式 1.属性 2.使用css控制表格的样式前言记录表格的结构,属 ...
ajax提交的表格怎么增加样式,20 个精美的Ajax + CSS 的表格效果_jquery
20 个功能强大,外观漂亮的基于Ajax + css 的表格效果,你可以从这些示例中学习怎么使用这些表格提供的排序和过滤的功能来组织表格中的数据. 现在让我们来看看这些表格: #1. Tableclo ...
CSS - 实现横向滚动（横向滚动布局）
前言横向滚动需求很常见,实现起来也很容易. 如下图所示,PC 端是用鼠标拖动滚动条,H5 移动端是手指滑动: 解决方案上述效果图的完整代码如下,一键复制运行起来即可. 核心三要素: 父元素设置 w ...
一列对应右侧几行html,css查找表格第几行第几列
css查找表格第几行几列说明:利用ntn-child(n)选择器进行实现.其中n代表选择元素中的第几个元素,第几个就写几,特殊的,要选中第一个可以写为: first-child ,要选中最后一个可写 ...
css表格排序,纯CSS实现表格排序-利用CSS 变量和Flexbox
1.引子今天闲逛知名前端资讯站Front-End Front,发现一个比较有意思的效果,给大家分享下,希望可以对大家有所启发. 纯CSS实现表格排序心急的同学,先看效果,我放在codepen上. ...

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

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

最新文章

热门文章