纯css实现table固定首行、首列以及最后一列冻结

最新推荐文章于 2024-07-11 17:28:05 发布
最新推荐文章于 2024-07-11 17:28:05 发布
阅读量121 收藏
点赞数
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15549021/article/details/133102344
版权

postion的sticky粘性定位
　　粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上(当该祖先的overflow是hidden、scroll、auto、overlay时)，即便这个祖先不是最近的真实可滚动祖先。

table-layout的fixedtable-layout css属性定义了用于布局表格单元格，行和列的算法。值可以是：auto、fixed。

auto

      表格和单元格的宽度取决于其包含的内容。

fixed

　　表格宽度通过表格的宽度来设置，某一列的宽度仅由该列首行的单元格决定，其他行单元格的宽度不会影响整列的宽度。

　  分析：在表格中，某些列需要指定不同的宽度，所以表格的table-layout css属性需要设置为fixed。

页面代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .table_wrap {
                width: 100%;
                height: 100px;
                overflow: auto;
                border-bottom:1px solid #61dafb;
            }

            table {
                table-layout: fixed;
                width: 100%;
                border-collapse: separate;
                border-spacing: 0;
                border: 1px solid #DDDDDD;
            }

            /* 表格th/td样式 */
            td,th {
                width: 150px;
                box-sizing: border-box;
                border-right: 1px solid #DDDDDD;
                border-bottom: 1px solid #DDDDDD;
                /*超出长度...*/
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                height: 30px;

            }

            /* 表头固定 */
            thead tr th {
                position: sticky;
                top: 0;
                background: #F4F4F5;
                height: 30px;
            }

            /* 首列固定/最后一列固定*/
            th:first-child,
            th:last-child,
            td:first-child,
            td:last-child {
                position: sticky;
                left: 0;
                background: #F4F4F5;
                text-align: center;
                right: 0px;
                border-left: 1px solid #DDDDDD ;
                width: 100px;
            }

            /* 表头首列和最后一列强制最顶层 */
            th:last-child,
            th:first-child {
                z-index: 3;
                /*左上角单元格z-index，切记要设置，不然表格纵向横向滚动时会被该单元格右方或者下方的单元格遮挡*/
                background: #F4F4F5;
            }
        </style>
    </head>
    <body>
        <div className="table_wrap">
            <table>
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>栏目1</th>
                        <th>栏目2</th>
                        <th>栏目3</th>
                        <th>栏目4</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td><a href="#">修改</a></td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td><a href="#">修改</a></td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td><a href="#">修改</a></td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td><a href="#">修改</a></td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td><a href="#">修改</a></td>
                    </tr>
                    <tr>
                        <td>6</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td><a href="#">修改</a></td>
                    </tr>
                    <tr>
                        <td>7</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td><a href="#">修改</a></td>
                    </tr>
                    <tr>
                        <td>8</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td><a href="#">修改</a></td>
                    </tr>
                    <tr>
                        <td>9</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td><a href="#">修改</a></td>
                    </tr>
                    <tr>
                        <td>10</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td><a href="#">修改</a></td>
                    </tr>
                    <tr>
                        <td>11</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td><a href="#">修改</a></td>
                    </tr>
                    <tr>
                        <td>12</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td><a href="#">修改</a></td>
                    </tr>
                    <tr>
                        <td>13</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td><a href="#">修改</a></td>
                    </tr>
                    <tr>
                        <td>14</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td><a href="#">修改</a></td>
                    </tr>
                    <tr>
                        <td>15</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td><a href="#">修改</a></td>
                    </tr>
                    <tr>
                        <td>16</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td><a href="#">修改</a></td>
                    </tr>
                    <tr>
                        <td>17</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td><a href="#">修改</a></td>
                    </tr>
                    <tr>
                        <td>18</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td><a href="#">修改</a></td>
                    </tr>
                    <tr>
                        <td>19</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td><a href="#">修改</a></td>
                    </tr>
                    <tr>
                        <td>20</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td><a href="#">修改</a></td>
                    </tr>
                    <tr>
                        <td>21</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td><a href="#">修改</a></td>
                    </tr>
                    <tr>
                        <td>22</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td><a href="#">修改</a></td>
                    </tr>
                    <tr>
                        <td>23</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td><a href="#">修改</a></td>
                    </tr>
                    <tr>
                        <td>24</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td><a href="#">修改</a></td>
                    </tr>
                    <tr>
                        <td>25</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td><a href="#">修改</a></td>
                    </tr>
                    <tr>
                        <td>26</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td><a href="#">修改</a></td>
                    </tr>
                    <tr>
                        <td>27</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td><a href="#">修改</a></td>
                    </tr>
                    <tr>
                        <td>28</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td><a href="#">修改</a></td>
                    </tr>

                </tbody>

            </table>

        </div>

    </body>
</html>

效果图

qq_15549021
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
table冻结第一行
Digyso 注芯蛋糕
10-22 5392
<br /><html> <head> <title></title> <mce:style type="text/css"><!-- div#tbl-container {position:absolute;left:21px;top:70px;width:95%;height:300px;overflow: auto;} .table { TABLE-LAYOUT: fixed; position: absolute; BORDER-COLLAPSE: collapse; b
table冻结列，可冻结首行，首列
zhaofuqiangmycomm的博客
10-31 6528
原理 表格左右拆分，再上下拆分，最后拆分为四个table容器 滚动右下table时，加scroll事件，控制左下scrollTop与右上scrollLeft两个table的scroll值 注意 左下、右上overflow: hidden,右下overflow: scroll 左下、右下最后需要新增<td style="visibility: hidden;"></td&g...
Table冻结表头
在爬行中进步
08-20 2953
Table冻结表头： function fixupFirstRow(tab) { var div=tab.parentNode; if(div.className.toLowerCase()=="freezediv"){ tab.rows[0].style.zIndex="1"; tab.r
table固定首行首列
Stavin Li的博客
12-29 7988
原理 表格左右拆分，再上下拆分，最后拆分为四个table容器 滚动右下table时，加scroll事件，控制左下scrollTop与右上scrollLeft两个table的scroll值 注意 左下、右上overflow: hidden,右下overflow: scroll 左下、右下最后需要新增&lt;td style="visibility: hidden;"&gt;&lt;/td&g...
在ASP.NET页面中冻结DataGrid的列或头部
weixin_33894992的博客
10-19 99
写在前面：在Asp.Net页面中，有时候我们需要冻结DataGrid中的某一列，比如显示的数据项过多时，我们需要让第一列不动，拖动横向滚动条时其他列隐藏，这时就需要冻结列了；另外，有时候也需要让DataGrid的头部不动，拖动纵向滚动条时，下面的数据项可以滚动。在实现的过程中，其实就是用了CSS样式来控制，一起看一下。一.冻结某一列：  1&lt;%@ Page language="c#" Co...
table 冻结列原型
01-11
"表格冻结列原型"是一种在网页设计中常见的功能，它允许用户在滚动浏览长表格时保持某些列固定不动，以便始终可见关键信息。这个原型可能是为开发者或设计师提供了一个直观的示例，以理解如何在实际项目中实现这一...
点击table首行列名按该列内容排序+冻结窗口
05-27
总的来说，实现“点击table首行列名按该列内容排序+冻结窗口”的功能，需要前端开发者具备扎实的JavaScript基础，理解DOM操作、事件处理以及一定的CSS布局知识。同时，熟悉使用相关的库或框架也是提高开发效率的关键...
table固定行和列
12-14
在Web开发中，表格（Table）是展示数据的常用元素，但如何实现表格的固定行和列是一项常见的需求。这通常涉及到CSS样式控制，以便在滚动时保持特定行或列始终可见，提升用户浏览大量数据时的体验。下面将详细探讨...
js固定表头和第一列固定
03-15
在网页开发中，数据展示通常会使用表格（Table）元素，尤其在大数据量的情况下，固定表头和第一列成为提高用户体验的重要设计。标题"js固定表头和第一列固定"所涉及的技术点主要是如何利用JavaScript实现这样的效果...
bootstrap-table-fixed-columns(css,js)
05-06
这个项目的扩展`bootstrap-table-fixed-columns`专注于解决在大表格中固定首列或首行的问题，使得在滚动时这些重要列始终保持可见，提高用户在浏览长表格时的可读性和交互性。在网页设计中，尤其是在数据密集型应用...
Table冻结多行表头
在爬行中进步
08-21 1762
Table冻结多行表头 function fixupFirstRow(tab,num) { var div=tab.parentNode; if(div.className.toLowerCase()=="freezediv"){ for(var i=0;i<num;i++){ ta
html table冻结首行,Html Table的首行和首列冻结效果
weixin_30404219的博客
06-05 1703
CSS代码：table.dataintable {border-collapse: collapse;font-family: Arial,Helvetica,sans-serif;}.tableContainer{width: 850px;height: 150px;border-left: 1px solid silver;border-top: 1px solid silver;overfl...
【博学谷学习记录】超强总结，用心分享 |子代选择器
scjiji的博客
08-23 224
今天就来一起看一下css选择器中的子代选择器中的nth，nth的使用有一定的限制：选中的元素必须是某个父元素下的第n个子元素，今天以表格为例，看一看nth选择器的效果
Css之 table表格 实现表头滚动固定并且固定最后一列在右侧
qq_39835505的博客
03-15 2060
固定表头 https://blog.csdn.net/qq_36939013/article/details/108101677 固定最后一列在最右侧 https://blog.csdn.net/weixin_39884872/article/details/117763346 纯css 实现 table固定首行、首列以及最后一列冻结 https://www.cnblogs.com/a876459952/p/15737003.html <!DOCTYPE html> <html>
前端页面Table CSS实现固定表头表首行和固定列拖动固定
小熊猫
05-11 3069
sticky 的表现类似于relative 和fixed 的合体，在目标区域中可见时，他的行为就像relative 不会有任何变化，而当页面滚动超出目标区域时，他的表现改为fixed会固定于目标位置。要注意的是当position : sticky应用于table，只能作用于和，并且一定要定义目标位置 left / right / top / bottom 才会出现固定效果！为了让表格呈现滚动效果，必须设定table-layout:fixed 并且给与表格宽度。
asp.net table表格表头及列固定实现
分享经验，共同进步.
09-21 7192
在开发中常会遇到table表格中列特别多，下拉后，表头就看不见了，水平滚动后，第1、2列就看不见了，于是需求就出来了，就是需要固定table的表头和列。demo结构如下图所示：demo下载地址：http://download.csdn.net/detail/taomanman/9124949示例运行效果如下图所示：
scss概念及使用
m0_74293254的博客
07-10 902
/ 样式规则使用参数在上面的例子中，@mixin 关键字定义了一个名为 mixin-name 的混合，可以接受多个参数（如果需要的话），并在其中定义一组样式规则。SCSS 的三种循环结构 @for、@each 和 @while 分别用于按照索引循环、遍历列表或 map 类型数据、以及根据条件循环生成样式。这些循环结构使得 SCSS 更加强大和灵活，能够根据需求生成复杂的 CSS 规则。在 SCSS 中，可以使用自定义函数来增强样式表的功能，这些函数可以接受参数并返回处理后的值。
在一个使用了 Sass 的 React Webpack 项目中安装和使用 Tailwind CSS
最新发布
Chloeeeeeeee的博客
07-11 90
在使用了 Sass 的 React 和 Webpack 项目中安装和使用 Tailwind CSS，可以按以下步骤进行：安装 Tailwind CSS 及其依赖，并初始化配置文件；创建 `postcss.config.js` 并配置 Tailwind CSS 插件；在 `src` 目录中创建 `index.css` 并引入 Tailwind 的基础、组件和工具类；更新 Webpack 配置以处理 PostCSS 插件和 Tailwind CSS；最后在组件中导入 `index.css` 和 Sass 文件
CSS实现从上往下过渡效果
m0_56164131的博客
07-11 82
要实现一个从上往下显示的过渡效果，可以使用CSS的@keyframes规则来创建一个动画，使得元素在垂直方向上逐渐改变其位置。
通过CSS样式锁定Table的首行首列
05-27
可以通过CSS的伪类选择器来实现锁定Table的首行和首列，具体实现方式如下： ```css /* 锁定首行 */ table tr:first-child { position: sticky; top: 0; background-color: #fff; z-index: 1; } /* 锁定首列 */ table td:first-child { position: sticky; left: 0; background-color: #fff; z-index: 1; } ``` 上述代码中，使用了 `position: sticky` 属性将首行和首列固定在表格的顶部和左侧，`top` 和 `left` 属性用于设置距离顶部和左侧的距离，`background-color` 属性用于设置背景颜色，`z-index` 属性用于设置元素的层级关系。这样就可以实现锁定Table的首行和首列了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值