正文 

当前位置： 首页 > java > java框架

bootstraptable实现固定悬浮table表头并可以水平滚动

wakasann      2022-02-08     619

关键词：

在开发项目中，需要将表格头部固定，而且表格大多数情况下是会水平滚动的。项目的css框架是bootstrap 3，故也可以叫做bootstrap table。

需要实现的是：表格头部固定，并且支持水平滚动

html code(source table):

<table id="top_fix_table" border="0" cellpadding="4" cellspacing="0" class="table table-hover">
    <thead>
        <tr id="table_head">
             <td>Test</td>
             ....
        </tr>
    </thead>
   <tbody>

   </tbody>
</table>

stylesheet code:

#fixed_table #fix_head{
    background: #FFFFFF;
    box-shadow: 0px 0px 5px #888888;
}

 

JS代码按效果不同有一些不同

效果一 是浏览器滚动条滚动，头部固定:

 

效果二 内容内部滚动，固定表格头部。js,html是基于效果一，Html,js,css 代码相对效果一有增加。

 

附生成 codepen.io中table thead和tbody 内容的php code:

<?php
$count = 30;

echo '<tr id="table_head">';
for($i=0;$i<$count;$i++){
    echo "<td>Test{$i}</td>";
}
echo '</tr>';

echo "content trs---------------\r\n";

$content_count = 30;
for($i = 0; $i < $content_count;$i++){
    echo '<tr>';
    for($j = 0;$j < $count;$j++){
        echo "<td>content".($i+1)."</td>";
    }
    echo '</tr>';
}

如果当前电脑没有PHP运行环境，可以百度: php代码在线运行 ，点击进入搜索结果列表的一个，然后将php代码复制进代码输入框中，运行之后应该就可以看到生成的有tr td 内容的字符串。

 

参考文档：

  1. css position:fixed时还能水平滚动，如何实现    实现了固定头部的水平滚动
  2. 网页制作中在头部固定悬浮table表头(thead)的方法  javascript 主要代码来源
  3. jquery outerHeight方法 outerWidth方法 获取元素实际宽度高度  学习获取元素实际宽度
  4. firefox下table固定寬度  解决Firefox浏览器下table宽度不识别
  5. how to get innerWidth of an element in jquery WITHOUT scrollbar 效果二中，需要实现 滚定头部不遮住内容滚动条，所以需要设定宽度。笔者是按照回答得到思路，笔者偷懒直接加一个div，直接获取这个div的宽度，就获取内容区的宽度了。

关于bootstraptable固定列宽

首先为table设置 style="table-layout: fixed;" <tableid="assessStage"data-height="467"data-mobile-responsive="true"style="table-layout:fixed;">       & 查看详情

bootstraptable可以固定表头吗

...会水平滚动的。项目的css框架是bootstrap3，故也可以叫做bootstraptable。需要实现的是：表格头部固定，并且支持水平滚动htmlcode(sourcetable):复制代码<tableid="top_fix_table"border="0"cellpadding="4"cellspacing="0"cla... 查看详情

用bootstraptable插件实现的表格，如何实现固定表头，当列多的情况下还可以跟着拖动，求指教

参考技术A可以下载一个supertable的JS-jquery组件看看.\r\n原理是把一个table拆成四个div,简单说就是把滚动的部分悬停固定部分之上.\r\n比如克隆一个表头出来(DIV),然后设置全表的那个DIV上移一个表头高度,这样滚动表体而... 查看详情

table里面放input去掉线

如何去掉bootstraptable中表格样式中横线竖线css实现table中td单元格鼠标悬浮时显示更多内容jquery遍历table获取td单元格的值C#对Excel单元格格式,及行高、列宽、单元格边框线、冻结设置C#Excel行高、列宽、合并单元格、单元格边框线... 查看详情

bootstraptable拖动列实现以及问题

...这里用的是colResizablejs：tableInit:function()$('#tb').bootstrapTable('destroy').bootstrapTable(略，height:$(window).heigh 查看详情

bootstraptable拖动列实现以及问题

依赖<!--拖动调整列宽相关--><scripttype="text/javascript"src="bootstrap-table/extensions/resizable/bootstrap-table-resizable.js"></script><scripttype="text/ja 查看详情

layui-table表格渲染(代码片段)

记项目中又一表格使用方法，项目首选是使用BootstrapTable的，但是经过多番查证与调试，始终没有把固定列的功能调试成功，找到的成功的例子原样照搬都不行，文件引入也都没有问题，实在搞不懂了，如果有哪位大神知道Bootstr... 查看详情

bootstraptable常用方法

获取所有表格数据varrows=$(‘#table‘).bootstrapTable(‘getData‘)获取选中的数据varselected=$("#table").bootstrapTable(‘getSelections‘);清空表格所有数据$("#table").bootstrapTable(‘removeAll‘)刷新表格数据$(‘#table‘).bootstrapTable("ref 查看详情

bootstraptable如何使用

最近在使用bootStrapTable的表格功能有一些自己的理解写下来分享一下主要用的是一个bootStrapTable和jquery的混合开发具体怎样引入bootStrapTable我就不一一详解了直接上代码htm代码<tableid="table0"></table>js代码var$table=$(‘#table0‘)... 查看详情

jquery实现相对浏览器位置固定悬浮

   <scriptsrc="Scripts/jquery-1.4.1.min.js"type="text/javascript"></script><scripttype="text/javascript">$(document).ready(function(){varstayBottom=function(){///相对于浏览 查看详情

bootstraptable怎么用

首先,你要知道一个基础table的标签怎么去写,只有知道这个基础,你才能更好的用bootstrap中的table.html在这不过多说明.既然看这篇文章,肯定都能够理解.然后现在就把bootstrap中的table来详细说明一下.基础的table如下:下面了解一下bootst... 查看详情

bootstraptable插件怎么固定表头

参考技术A设置表格宽度属性：colWidths:[100,93,93,93,93], 查看详情

bootstraptable列宽拖动的方法

　　在之前做过的一个web项目中，前端表格是基于jQuery和BootstrapTable做的，客户要求能利用拖动改变列宽，为了总结和备忘，现将实现的过程记录如下：　　1、BootstrapTable可拖动，需要用到它的Resizable扩展插件，具体可见bootstrap-... 查看详情

bootstraptable样式

 .table-striped可以使奇数行的背景设为灰色。 <table class="table table-striped">    …  </table>  .table-bordered可以使边框显示。 <table cl 查看详情

bootstraptable

Bootstraptable学习一、在页面中引入相关文件。Jquery.jsbootstrap.js bootstrap.cssBootstrap-table.js bootstrap-table.css二、编写页面1．准备一个空表格<div><table id=”table”></table></di 查看详情

为啥bootstraptable不显示数据

参考技术A首先,你要知道一个基础table的标签怎么去写,只有知道这个基础,你才能更好的用bootstrap中的table.html在这不过多说明.既然看这篇文章,肯定都能够理解.然后现在就把bootstrap中的table来详细说明一下.基础的table如下:下面了... 查看详情

bootstraptable怎么控制表格显示

参考技术A首先,你要知道一个基础table的标签怎么去写,只有知道这个基础,你才能更好的用bootstrap中的table.html在这不过多说明.既然看这篇文章,肯定都能够理解.然后现在就把bootstrap中的table来详细说明一下.基础的table如下:下面了... 查看详情

table.bootstraptable()之基本使用方法(代码片段)

在业务系统开发中，对表格记录的查询、分页、排序等处理是非常常见的，在Web开发中，可以采用很多功能强大的插件来满足要求，且能极大的提高开发效率，Bootstrap-table插件提供了非常丰富的属性设置，... 查看详情