table表格固定表头

table表格内容过多时会出现滚动，若不固定表头的话，当滚动到下方时即看不见每一列所对应的标题，影响用户体验！

废话不多说，直接上代码！！！

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>固定表头</title><link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"></head><style type="text/css">.tableHeader {position: sticky;top: -1px;display: none;background-color: #7dc3ff;table-layout: fixed;}</style><body><div class="col-lg-12"><table class="table table-bordered table-hover tableHeader"><thead><tr><th>ID</th><th>表头1</th><th>表头2</th><th>表头3</th><th>其他</th></tr></thead></table><table class="table table-bordered table-hover tableBody" style="table-layout: fixed;"><thead><tr><th>ID</th><th>表头1</th><th>表头2</th><th>表头3</th><th>其他</th></tr></thead><tbody></tbody></table></div></body><script type="text/javascript">var str = ''for (var i = 0; i < 100; i++) {str += "<tr>" + "<td>" + (i + 1) + "</td>" + "<td>" + '哈哈1' + "</td>" + "<td>" + '哈哈2' + "</td>" + "<td>" + '哈哈3' +"</td>" + "<td>" + '哈哈4' + "</td>" + "</tr>"}document.querySelector(".tableBody>tbody").innerHTML = strwindow.onscroll = function() {var d = document.documentElement.scrollTopif (d >= 40) {document.querySelector(".tableHeader").style.display = "inline-table"} else {document.querySelector(".tableHeader").style.display = "none"}}</script>
</html>

table表格固定表头相关推荐

php中表头不跟着滑动,JS实现table表格固定表头且表头随横向滚动而滚动
这篇文章主要介绍了JS实现table表格固定表头且表头可以随横向滚动而滚动,对js的朋友可以参考下本篇文章先看一张效果图思路: 1.头部用一个table并用一个p包裹着, 表格的具体内容用一个ta ...
vue项目中table表格固定表头和首尾列
在html中实现table表格固定表头和首尾列的方法和文章很多,本文就不再赘述. 本文主要介绍vue项目中三种情景下实现table表格固定表头和首尾列情景一:vue+element 只要在el-ta ...
微信小程序 table表格固定表头和首列右侧表格可以左右滚动（多种表格演练）
最近在做公司的项目需要到表格展示数据,但是微信小程序是没有原生table标签的,于是就百度各种搜...发现结构有类似的就粘过来修改,要善于学习和借鉴别人的经验使其变成为自己的东西,学无止境~ 在这里做 ...
【css】纯css实现table表格固定表头，表内容滚动
今天在写公司项目的时候,遇到了一个比较xx的问题,现公司的项目使用的是 vue2.0 和 element-ui 搭建的. 那么提到 element-ui 大家都知道,他最实用的一个组件就是表格了,简直 ...
HTML table表格固定表头 tbody加滚动条
纯CSS table表格 thead固定 tbody滚动效果由于项目需要,在表格中,当数据量越来越多时,就会出现滚动条,而在滚动的过程中,默认情况下表格头部会跟着表格内容一起滚动,导致看不到头部对应 ...
element table滚动条占宽度_HTML table表格固定表头 tbody加滚动条
纯CSS table表格 thead固定 tbody滚动效果由于项目需要,在表格中,当数据量越来越多时,就会出现滚动条,而在滚动的过程中,默认情况下表格头部会跟着表格内容一起滚动,导致看不到头部对应 ...
html 滚动条_HTML table表格固定表头 tbody加滚动条
纯CSS table表格 thead固定 tbody滚动效果由于项目需要,在表格中,当数据量越来越多时,就会出现滚动条,而在滚动的过程中,默认情况下表格头部会跟着表格内容一起滚动,导致看不到头部对应 ...
iframe 滚动条不显示_HTML table表格固定表头 tbody加滚动条
纯CSS table表格 thead固定 tbody滚动效果由于项目需要,在表格中,当数据量越来越多时,就会出现滚动条,而在滚动的过程中,默认情况下表格头部会跟着表格内容一起滚动,导致看不到头部对应 ...
table表格固定表头，内容滚动显示
目的:做一个table表格,实现固定标题行而内容可滚动 html部分代码如下: <!DOCTYPE html> <html><head><meta chars ...
JS(JQ)实现table表格固定表头且表头可以随横向滚动而滚动
先看一张效果图思路: 1.头部用一个table并用一个div包裹着, 表格的具体内容用一个table 2.头部外面的div用positon: relative相对定位 3.获取整个表格的高度 4.获 ...

table表格固定表头

table表格内容过多时会出现滚动，若不固定表头的话，当滚动到下方时即看不见每一列所对应的标题，影响用户体验！

table表格固定表头相关推荐

最新文章

热门文章