bootstrap 表格表头固定

最新推荐文章于 2024-05-19 13:56:53 发布
最新推荐文章于 2024-05-19 13:56:53 发布
阅读量1.1w 收藏 5
点赞数 3
文章标签： bootstrap css 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mathcoder23/article/details/75268950
版权

效果

效果是在pc端和移动端能够使表格的表头固定，并且在顶部，支持缩放时布局不乱。

核心技术

利用css的position:fixed 属性来脱离文档流，达到表头固定的效果。

代码

说明都在代码里面，这里就不多说了。

<html>
<head>
    <title>用户表</title>
    <!-- jquery库-->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <
最低0.47元/天 解锁文章
mt23
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
bootstrap 取消_bootstrap-table实现表头固定以及列固定
weixin_32461163的博客
02-01 758
之前使用bootstrap写了一个报表表格，最近突然找到我，说让我看看能不能将表格的表头和第一列进行固定，这样的话方便查看数据，于是，我开始了苦逼的研究起来，毕竟我是个后端啊，对于前端的样式问题，特别是小功能，烦的一批这里就记录下我的研究成果一：引入js和css<!-- 引入jquery --> <script type="text/javascript" src="./js/j...
BootStrap table表格插件自适应固定表头(超好用)
09-01
主要介绍了BootStrap table表格插件自适应固定表头(超好用)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
bootstrap-table固定右侧列+表头和内容对齐
wlf_wzx的博客
06-22 3037
前端框架
BootStrap入门到实战：BootStrap全局CSS样式（三）- 表格、表单、按钮、图片、辅助类
最新发布
林林一928的博客
05-19 1077
一. 表格 1.基本表格2.带边框的表格3.条纹状表格4.鼠标悬停时作出响应的表格5.紧缩表格6. 状态类7. 响应式表格。 二.表单 1.基本实例2.水平排列的表单3.内联表单4.被支持的控件4.1输入框4.2文本域4.3多选4.4 单选5.表单状态5.1焦点在状态5.2禁用状态5.3只读状态5.4效验状态5.5控制尺寸 三.按钮 1.可作为按钮使用的标签或元素2. 预定义样式3. 尺寸4. 禁用状态 四.图片 1.响应式图片2.图片形状 五.辅助类 1.情景文本颜色2.情景背景色3.关闭按钮4.三角符号
bootstrap-table固定表头、固定列、拖动调整列宽大小
墨 尘
11-11 9926
bootstrap-table API：https://www.bootstrap-table.com.cn/doc/api/column-options/ $('#table').bootstrapTable({ url: '', //请求后台的URL（*） method: 'get', //请求方式（*...
bootstrap表格固定表头并且tbody部分添加滚动条
10-24
Bootstrap表格在设计网页时是一种非常常用的组件，尤其在处理大量数据时，为了提供更好的用户体验，我们经常需要在tbody部分添加竖向滚动条，同时保持表头固定不动。这样，当用户滚动内容时，表头始终保持可见，便于...
bootstrap固定表头
03-23
"bootstrap固定表头"这个主题，主要涉及的是如何在Bootstrap表格中实现表头（thead）在滚动时始终保持可见，以便用户在浏览长表格内容时能始终看到列标题。 在Bootstrap中，固定表头通常通过CSS和JavaScript来实现...
bootstrap-table实现表头固定以及列固定的方法示例
10-17
主要介绍了bootstrap-table实现表头固定以及列固定的方法示例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue.js表格表头首行固定代码
06-24
在Vue.js中，实现表格表头首行固定的代码是一个常见的需求，特别是在大数据量或需要滚动浏览的场景下，保持表头可见能极大地提高用户界面的可读性。本实例主要涉及的技术点包括Vue组件化开发、CSS定位以及响应式布局...
BootstrapTable之前端导出、字段排序、表头固定
qzz12345的博客
04-05 3675
BootstrapTable使用 BootstrapTable是一个高效的表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。 前言 本文章记录的是利用BootstrapTable实现数据展示、数据导出（前端导出）、字段排序、表头固定（设置height属性即可） 提示：以下是本篇文章正文内容，下面案例可供参考 一、BootstrapTable实现数据展示 直接上代码： <div class="col-md-12">
jQuery+Bootstrap实现页面向下滚动表格头部固定特效特效代码
03-20
jQuery+Bootstrap实现页面向下滚动表格头部固定特效源码是一款利用原生Bootstrap的表格在向下滚动时表格头位置固定不动，非常实用。本段代码适应于所有网站使用，有需要的朋友们可以前来下载使用，本段代码兼容目前最新的各类主流浏览器，是一款非常优秀的特
Bootstrap固定表头
weixin_30478757的博客
05-20 121
1.本文参照http://www.wenzhixin.net.cn/2014/08/10/fixed_table <!DOCTYPE html><html lang="en"><link href="static/css/bootstrap/bootstrap.css" rel="stylesheet" type="text/css"><link hre...
bootstrap中固定table的表头
懒人的博客
11-02 3万+
bootstrap中固定table的表头
bootstrap-table实现表头固定以及列固定
huaweichenai的博客
03-06 3万+
之前使用bootstrap写了一个报表表格，最近突然找到我，说让我看看能不能将表格的表头和第一列进行固定，这样的话方便查看数据，于是，我开始了苦逼的研究起来，毕竟我是个后端啊，对于前端的样式问题，特别是小功能，烦的一批 这里就记录下我的研究成果 一：引入js和css &lt;!-- 引入jquery --&gt; &lt;script type="text/javascript" src=...
bootstrap的table表头固定tbody滚动
热门推荐
Cool的博客
04-11 4万+
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;meta charset="UTF-8"&gt; &lt;link rel="stylesheet" type="text/css" href="css/bootstra
bootstrap-table固定表头固定列
qsl319的博客
09-23 1万+
bootstrap-table固定表头固定列 1.引入 　　bootstrap依赖于jquery 　　bootstrap-table依赖于bootstrap,所以都需要引入 2. bootstrap-table有两种方式，html、js 1 2 3 4 5 6 7 8 9 10 11 12...
bootstrap中表格固定头部：
weixin_33816611的博客
03-29 418
2019独角兽企业重金招聘Python工程师标准>>> ...
BootstrapTable冻结表头（一）
csdnluolei
01-16 7312
BootstrapTable冻结表头，使用别人写的 JS，这种方法表头置顶后就不会动了。改正一个隐含的bug就是拉动滚定条时表头与数据列不对应。还有一种方法 BootstrapTable冻结表头（二） bootstrap-table-fixed-header的js和css下载  链接：https://pan.baidu.com/s/1d8qB1bldjhLEWQp6jsMBOQ  提取码：r5...
bootstrap table 表头固定表体滚动
03-29
在 Bootstrap 中，可以使用固定表头和滚动表体的插件来实现这个效果。以下是实现步骤： 1. 引入必要的文件： ``` <link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/bootstrap/4.3.1/js/bootstrap.min.js"></script> ``` 2. 创建一个表格，并在表格头部添加 `thead` 标签： ``` <table class="table table-bordered table-striped"> <thead> <tr> <th>列头1</th> <th>列头2</th> <th>列头3</th> </tr> </thead> <tbody> <tr> <td>行1列1</td> <td>行1列2</td> <td>行1列3</td> </tr> <tr> <td>行2列1</td> <td>行2列2</td> <td>行2列3</td> </tr> <!-- more rows --> </tbody> </table> ``` 3. 使用 JavaScript 初始化表格，并调用插件： ``` $(function() { $('.table').fixedHeaderTable({ fixedColumn: true }); }); ``` 其中，`fixedHeaderTable` 是插件名称，`fixedColumn: true` 表示需要固定表头。 4. 根据需要调整样式： ``` .table-fixed-header { overflow-y: auto; max-height: 400px; } .table-fixed-header thead th, .table-fixed-header tbody td { width: 100px; min-width: 100px; max-width: 100px; } ``` 其中，`.table-fixed-header` 是插件自动生成的类名，可以根据需要进行修改。 完整代码如下： ``` <!DOCTYPE html> <html> <head> <title>Bootstrap Table 表头固定表体滚动</title> <meta charset="utf-8"> <link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap/4.3.1/css/bootstrap.min.css"> <style> .table-fixed-header { overflow-y: auto; max-height: 400px; } .table-fixed-header thead th, .table-fixed-header tbody td { width: 100px; min-width: 100px; max-width: 100px; } </style> </head> <body> <div class="container"> <table class="table table-bordered table-striped table-fixed-header"> <thead> <tr> <th>列头1</th> <th>列头2</th> <th>列头3</th> </tr> </thead> <tbody> <tr> <td>行1列1</td> <td>行1列2</td> <td>行1列3</td> </tr> <tr> <td>行2列1</td> <td>行2列2</td> <td>行2列3</td> </tr> <!-- more rows --> </tbody> </table> </div> <script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/bootstrap/4.3.1/js/bootstrap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/fixed-header-table@1.3.2/dist/fixed-header-table.min.js"></script> <script> $(function() { $('.table').fixedHeaderTable({ fixedColumn: true }); }); </script> </body> </html> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值