bootstrap固定table表头

前端时间鼓捣的一个简单的手机网站，今天又拿出来弄一弄

因为主要是给手机访问，用的是bootstrap响应式布局，今天的任务是做一个数据展示页面

但是由于数据的列比较多，所以横向显示不下，为了较好的显示，将table包裹在了一个.table-responsive元素里

那么在较小的视口（viewport）时，则可以通过滑动来查看整条数据，从而能保证整体页面的协调性。

刚才说了，数据列比较多，且第一列是后面数据的所有者，那么观察者在看数据的时候肯定是要对应着数据所有者来看的，那么问题来了

若是滑动到后面，那么很容易忘记本条的所有者，那是相当不方便的！比如我们在看NBA比赛数据的时候，有很多项统计（也就是很多列）

第一列显示的是名字，那么随着我们往后滑动，会出现这样的结果:

这样我们根本不知道数据对应的人是谁！哎~怎么办呢？

一般的方法都是将“所有者”一列固定下来，滑动时仅滑动后面的列。

不过之前用这个功能都是在前端框架中封装好了的，比如easyUI中有frozen columns，但是在bootstrap中倒是没用过（它本身也没提供这个）

那么自己写一个吧~也没什么思路，之后终于想到一种“非主流”一点的方法：用2个table

左边的table用来显示固定信息，而右边的table用来滑动看数据

实现起来比较简单，将几个要点：

1、使用float:left来将2个table排列到一行上，但是两者和起来的width不能超过总width

2、注意2个table单元格的对齐

最后实现的效果如下：

转自：http://blog.csdn.net/u012345283/article/details/40692065

bootstrap固定table表头相关推荐

html固定table表头的实现思路
2019独角兽企业重金招聘Python工程师标准>>> 实现步骤 1.将table放在可滚动容器中: 2.可滚动容器外层还需要一个容器,这个容器需设置超出范围隐藏和定位(相对.绝对都 ...
java 表头固定_BootStrap的table表头固定tbody滚动的实例代码
关于bootstrap table其他知识不多说,直接给大家贴代码了. 关键代码如下所示: 栏目一栏目二栏目三栏目一栏目二栏目三星期一星期二星期三星期一星期二星期三星期一星期二星期二星期三星期一 ...
html表格类似excel固定表头样式,(转)supertable像excel那样固定table的表头和第一列...
像excel那样固定table的表头和第一列 .left,.right{float: left;height: 297px;background-color: #ccc;} #left_topic{h ...
Bootstrap Table 表头和表格内容不对齐
Bootstrap Table 表头和表格内容不对齐前言原因解决方式思路一思路二思路三前言之前的一次开发中使用到了Bootstrap Table的组件,在使用过程中出现了表头与表格内容 ...
bootstrap table 表头与内容不对齐问题解决
bootstrap table 表头与内容不对齐问题解决参考文章: (1)bootstrap table 表头与内容不对齐问题解决 (2)https://www.cnblogs.com/sky-zk ...
JQuery实现的Table表头固定展示效果
在线演示1 在线演示2 在线演示3 本地下载大家可能经常需要展示数据或者报表,表头如果滚动上去后,查看数据的类别和字段是个麻烦事情,在这里我们推荐来自tympanus的一个JS实现的 table表头 ...
一眼就会table隔行换色、table表头固定、隔行色、鼠标移动行换色
抽出时间整理笔记:table头部固定.超出宽度可横向移动,主信息隔行换色.鼠标移动变色.举例: code : <!DOCTYPE HTML> <head><meta ht ...
HTML table表头固定
实现表格表头的固定,采用纯css的方式具体如下 <!DOCTYPE HTML> <html> <head> <meta http-equiv="C ...
table表头固定表体滚动
实际的项目中需要用到弹出框包含表格时,万一表格很长不方便显示,这时就需要滚动表格,那么怎么才能实现呢? 如下,是用纯css实现的滚动表格(但是firefox和360极速模式下存在兼容性问题,有待提高) ...

bootstrap固定table表头

bootstrap固定table表头相关推荐

最新文章

热门文章