bootstrap固定表头和列

最新推荐文章于 2024-08-15 09:08:34 发布
最新推荐文章于 2024-08-15 09:08:34 发布
阅读量2.6k 收藏 1
点赞数
分类专栏： html+css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/leng0920/article/details/95216837
版权 
<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Hello, Bootstrap Table!</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.2/dist/bootstrap-table.min.css">
    <link href="https://cdn.bootcss.com/bootstrap-table/1.15.2/extensions/fixed-columns/bootstrap-table-fixed-columns.min.css" rel="stylesheet">
    <style>
    </style>
</head>
<body>
    <div style="width: 700px;overflow-x: scroll;">
		<!-- data-toggle="table"启用bootstrap表格 -->
		<!-- data-striped="true" 设置为-->
		<!-- data-height="400" 设置表格高度-->
		<!-- data-fixed-columns="true" 固定列-->
		<!-- data-fixed-number="3" 固定列数为三列-->
<table id="table" class="table table-bordered table-hover"
           data-toggle="table"  
           data-classes="table table-hover"
           data-striped="true"  
           data-height="400"
            data-fixed-columns="true"
            data-fixed-number="3"
           > 
        <thead>
        <tr>
            <th>表格 ID</th>
            <th>表格 Name</th>
            <th>表格 Price</th>
            <th>表格 Price</th>
            <th>表格 Price</th>
            <th>表格 Price</th>
            <th>表格 Price</th>
            <th>表格 Price</th>
            <th>表格 Price</th>
            <th>表格 Price</th>
            <th>表格 Price</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>Item 1</td>
            <td>$1</td>
            <td>Item 1</td>
            <td>$1</td>
            <td>Item 1</td>
            <td>$1</td>
            <td>Item 1</td>
            <td>$1</td>
            <td>Item 1</td>
            <td>$1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Item 2</td>
            <td>$2</td>
            <td>Item 1</td>
            <td>$1</td>
            <td>Item 1</td>
            <td>$1</td>
            <td>Item 1</td>
            <td>$1</td>
            <td>Item 1</td>
            <td>$1</td>
        </tr>
           <tr>
            <td>2</td>
            <td>Item 2</td>
            <td>$2</td>
            <td>Item 1</td>
            <td>$1</td>
            <td>Item 1</td>
            <td>$1</td>
            <td>Item 1</td>
            <td>$1</td>
            <td>Item 1</td>
            <td>$1</td>
        </tr>
           <tr>
            <td>2</td>
            <td>Item 2</td>
            <td>$2</td>
            <td>Item 1</td>
            <td>$1</td>
            <td>Item 1</td>
            <td>$1</td>
            <td>Item 1</td>
            <td>$1</td>
            <td>Item 1</td>
            <td>$1</td>
        </tr>
           <tr>
            <td>2</td>
            <td>Item 2</td>
            <td>$2</td>
            <td>Item 1</td>
            <td>$1</td>
            <td>Item 1</td>
            <td>$1</td>
            <td>Item 1</td>
            <td>$1</td>
            <td>Item 1</td>
            <td>$1</td>
        </tr>
           <tr>
            <td>2</td>
            <td>Item 2</td>
            <td>$2</td>
            <td>Item 1</td>
            <td>$1</td>
            <td>Item 1</td>
            <td>$1</td>
            <td>Item 1</td>
            <td>$1</td>
            <td>Item 1</td>
            <td>$1</td>
        </tr>
           <tr>
            <td>2</td>
            <td>Item 2</td>
            <td>$2</td>
            <td>Item 1</td>
            <td>$1</td>
            <td>Item 1</td>
            <td>$1</td>
            <td>Item 1</td>
            <td>$1</td>
            <td>Item 1</td>
            <td>$1</td>
        </tr>   <tr>
            <td>2</td>
            <td>Item 2</td>
            <td>$2</td>
            <td>Item 1</td>
            <td>$1</td>
            <td>Item 1</td>
            <td>$1</td>
            <td>Item 1</td>
            <td>$1</td>
            <td>Item 1</td>
            <td>$1</td>
        </tr>

</table>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.2/dist/bootstrap-table.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.15.2/extensions/fixed-columns/bootstrap-table-fixed-columns.min.js"></script>
</body>
</html>

 

性野喜悲
关注
专栏目录
Bootstrap Table 如何做到 固定表头和列
毒王的博客
01-01 3529
近期工作中，碰到甲方需求：给一个bootstrap table表格，增加表头和第一列不随滚动条动而变化。即：要求固定表头和第一列。 官网上给的例子，就那么配置了几项，轻松加随意的达到效果。然而实际开发中，却是颇费了一番周折。好像我之前有个同事没解决这个需求，客户就交给我了。 A.先说固定表头： 极其简单：给table加一个height属性，不管是HTML加还是js里加，都一样~ 然后照官网的做了后...
锁定表头和固定列(Fixed table head and columns)
05-17
经典案例( 锁定表头和固定列(Fixed table head and columns)
bootstrap-table固定右侧列+表头和内容对齐
wlf_wzx的博客
06-22 3222
前端框架
Bootstrap Table 固定列插件使用教程
最新发布
gitblog_00353的博客
08-15 409
Bootstrap Table 固定列插件使用教程 bootstrap-table-fixed-columns项目地址:https://gitcode.com/gh_mirrors/bo/bootstrap-table-fixed-columns 项目介绍 bootstrap-table-fixed-columns 是一个用于固定表格头和列的插件，基于 Bootstrap Table 开发。该插...
基于Bootstrap Table的表格右侧列固定
qq_31606569的博客
09-25 9096
基于Bootstrap Table的表格右侧列固定 参考官方demo：https://examples.bootstrap-table.com/#extensions/fixed-columns.html 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基...
bootstrap-table固定右边列_Excel中的线性规划，某些数据相加接近于一个固定值！...
weixin_30487899的博客
01-29 192
有一个做财务工作的小伙伴问我，它收到10几张发票，然后他希望其中几张发票金额凑成一个数字，但他表示，凑了一上午的金额还没有凑出来，有没有什么好的解决办法，在Excel里面这个问题轻而易举的就可以完成。我们使用模拟案例来进行求解，如下所示：A列中有25个数字，如何找出来，哪些数字相加等于66666呢？第1种方法，使用VBA的方法：首先，我们在E1单元格中输入公式：=SUMPRODUCT(A1:A25...
bootstrap插件bootstrap-table-fixed-columns表格列左边右边固定及点击事件
qq_37363320的博客
06-09 1881
原文作者：https://www.weipxiu.com/7907.html 最近在老的后台项目用到表格固定列这个插件，但这个插件也相对老了，里面还是有些细节问题后续作者也没很好去维护支持，在此记录下我的解决方式 右侧列固定 这个问题分版本，并不是插件不支持，如果你是老版本，那只支持左侧固定，如果jQuery v1.11.0、bootstrap-table.js和bootstrap-table-fixed-columns.min.js是新v1.18.2（其他版本自测）就没问题 固定表格表头和列无法对齐 思路
bootstrap-table实现表头固定以及列固定的方法示例
10-17
这样即使用户滚动页面查看表格内容时，固定的表头或列依然可见，方便用户快速识别数据所在的列和行。 首先，要使用bootstrap-table实现表头固定以及列固定的功能，需要引入对应的JavaScript和CSS文件。这包括jQuery...
bootstrap table列和表头对不齐的解决方法
10-16
在实际使用中，可能会遇到列和表头对不齐的问题，尤其是在设置了固定表格高度并出现滚动条的情况下。这种问题通常是由于数据列中的滚动条占据了额外的宽度，导致表头和数据列的div容器宽度不一致。 要解决Bootstrap...
bootstrap固定表头
03-23
"bootstrap固定表头"这个主题，主要涉及的是如何在Bootstrap表格中实现表头（thead）在滚动时始终保持可见，以便用户在浏览长表格内容时能始终看到列标题。 在Bootstrap中，固定表头通常通过CSS和JavaScript来实现...
Bootstrap table 表单冻结固定 左侧列 右侧列方法
chenqinghu98的博客
05-30 664
【代码】Bootstrap table 表单冻结固定 左侧列 右侧列方法。
JS固定表头和左边列
04-10
原生JS写的表头固定及左边列固定功能，原创代码，代码比较简单，兼容IE8+、谷歌、火狐等主流浏览器，当前版本为1.7，此版本修正了性能问题，支持合并后的表格单元格，表格单元格可以不用设置宽度了。当表格总宽度设置不当时会有一些错位，单元格左右边框宽度不一样时，会有一些错位。
bootstrap-table-fixed-columns-v1.0.2.zip
06-08
FastAdmin使用bootstrap-table作为前端表格的基础组件库，通常列表交互展示已经够用了，包括通用搜索、排序、分页、导出、合并相同行/列等等。最近需要对表头进行冻结，找到了bootstrap-table-fixed-columns组件（也是bootstrap-table作者写的）能实现冻结效果，但带来了其他问题，包括：排序失效、列宽错位、合并行无效等，于是引入该组件的同时，顺便解决了这些问题，并且封装回原js中，使用时可以无忧无虑啦~
bootstrap-table-fixed-columns.zip
01-14
fastadmin 表格添加固定表头 bootstrap-table-fixed-columns所需插件
bootstrap-table-fixed-columns-master.zip
05-13
bootstrap-table样式固定列js插件，在网上看到下载资源比较少，免费提供给大家下载使用，方便开发进度。
bootstrap-table-fixed-columns.js
07-15
如有使用疑问，联系本人
关于bootstrap-table固定左侧右侧表头
weixin_44804278的博客
03-30 626
在项目bootstrap-table中，由于要展示的内容过多，导致右侧按钮无法直接展示。
bootstrap表格左固定列和右固定列
weixin_42162163的博客
06-04 2217
1：需要引用的js和css <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootstrap-table.css"> <link rel="stylesheet" href="css/bootstrap-table-fixed-columns.css"> <script src="js/jquery.min
bootstrap固定指定列_Bootstrap的栅格系统
weixin_36039434的博客
01-10 1186
Bootstrap包含了一个强大的移动优先的网格系统，它是基于一个12列的布局、有5种响应尺寸(对应不同的屏幕)。5种响应尺寸超小屏幕小屏幕中等屏幕大屏幕超大屏幕.container 最大宽度None (auto)540px720px960px1140pxclass.col-.col-sm-.col-md-.col-lg-.col-xl-列（column）数1212121212列间隙30px (每...
bootstrap table 表头固定表体滚动
03-29
在 Bootstrap 中，可以使用固定表头和滚动表体的插件来实现这个效果。以下是实现步骤： 1. 引入必要的文件： ``` <link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap/4.3.1/css/bootstrap.min....
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值