原生列表table固定表头

将 table 的 thead 和 tbody 拆分成两个表格，用 div 包起来，给 div 设置固定高度和 overflow: auto; 属性（其实只给 tbody 的 table 包上 div 就可以）。

<table class="bordered tTable"><thead><tr><td>1</td><td>2</td><td>3</td></tr></thead></table><div class="table-box"><table class="bordered tTable"><tbody><tr><td>11111</td></tr></tbody></table></div>

要给 table 添加一个 table-layout: fixed; 属性：使列宽由表格宽度和列宽度设定
具体的样式需要你们自己去调整

.tTable {table-layout: fixed;
}.table-box {overflow: auto;height: calc(100% - 60px);box-sizing: border-box;
}
//也可以给表头的table添加(因为博主当时写的环境不需要添加这个属性,所以这个定位得看需求)
table{position: fixed;
}

希望有帮到你们哦

原生列表table固定表头相关推荐

table固定表头和首列
table固定表头和首列 html部分,结构上分为左右两部分,又分别拆开为上下两部分,总共四个结构部分,以下为固定首行和首列,需要固定多行多列的可以自行添加,如下列表中姓名为左上角固定不变的位置,可自 ...
element table固定表头，表的高度自适应解决方法
element table固定表头,表的高度自适应解决方法参考文章: (1)element table固定表头,表的高度自适应解决方法 (2)https://www.cnblogs.com/muou ...
table固定表头滚动
一.table固定表头滚动(不兼容IE) 使用scrollTop监听滚动如下例 1.html <div class="tabflow" id="flowta ...
layui表格table固定表头第一行固定显示
layui表格table固定表头第一行固定显示代码示例如下: layui.use('table', function(){$ = layui.jquery;var table = layui.tab ...
html纵向表头,HTML table固定表头
最近尝试了几种HTML的table固定表头的方法..额...各有利弊,但很尴尬..... 1.thead和tbody的display设置为block; 这种可以实现,但是需要提前设置好每个th和td的 ...
纯CSS实现Table固定表头和首列
Table固定表头和首列这种需求应该比较常见.以往的做法,需要写一大堆脚本,而现在,可以使用position:sticky轻松实现这个效果. .table-container {width: 100% ...
php表滑动其它固定,table固定表头使表单横向滚动
这次给大家带来table固定表头使表单横向滚动,table固定表头使表单横向滚动的注意事项有哪些,下面就是实战案例,一起来看一下. 1.头部用一个table并用一个p包裹着, 表格的具体内容用一个ta ...
[HTML]TABLE固定表头和行头
TABLE固定表头和行头 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
el table 固定表头和首行_vue表格实现固定表头首列
前言最近在做vue移动端项目,需要做一个可以固定表头首列的表格,而且由于一些原因不能使用任何UI插件,网上找了很久也没什么好方法,所以在解决了问题之后,写下了这篇文章供后来人参考,文章有什么错漏的问 ...
React开发（230）:ant design table固定表头
固定表头方便一页内展示大量数据.需要指定 column 的 width 属性,否则列头和内容可能不对齐. 如果指定 width 不生效或出现白色垂直空隙, 请尝试建议留一列不设宽度以适应弹性布局,或 ...

原生列表table固定表头

原生列表table固定表头

原生列表table固定表头相关推荐

最新文章

热门文章