html表格table表头和首列固定

HTML的表格比安卓的表格简单很多，更适合做一些复杂的表格，下面是一种能将表格首列与表头固定，表格内容可滑动的表格，分享给大家。

主要 css 代码在 style 标签下，还有就是表格外层的div也设置了绝对布局，这样可以将内部表格的高度设置为100%，否则就需要设置一个固定高度。

HTML：

<div class="container"><div id="left-div"><div id="left-div1"><table><tr><th>编号</th></tr></table></div><div id="left-div2"><table id="left-table2"></table></div></div><div id="right-div"><div id="right-div1"><table id="right-table1"><tr><th>设备名称</th><th>设备类型</th><th>故障类型</th><th>故障状态</th></tr></table></div><div id="right-div2"><table id="right-table2"></table></div></div></div>

CSS：

* {margin: 0;padding: 0;}table {width: 100%;text-align: center;border-collapse: collapse;border-spacing: 0;}table td {word-break: break-all;word-wrap: break-word;}.container {width: 600px;height: 500px;padding: 0;box-sizing: border-box;}#left-div {width: 80px;float: left;}#left-div1 {width: 100%;}#left-div2 {width: 100%;height: 250px;overflow: hidden;}#left-table2 {margin-bottom: 4px;}#right-div {float: left;width: 240px;}#right-div1 {width: 100%;overflow: hidden;}#right-div2 {width: 100%;height: 250px;overflow: auto;}#right-table1 {width: 320px;}#right-table2 {width: 320px;overflow: auto;}th,td {height: 50px;width: 80px;line-height: 50px;overflow: hidden;text-align: center;}th {color: #1E304F;background-color: #F3F8FF;}td {color: #384967;}tr:nth-of-type(odd) {background: #E7F2FF;}/*可以美化一下滚动条*/#right-div2::-webkit-scrollbar {/*滚动条整体样式*/width: 4px;height: 4px;}#right-div2::-webkit-scrollbar-thumb {/*滚动条里面小方块*/border-radius: 5px;box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);background: rgba(0, 0, 0, 0.2);}#right-div2::-webkit-scrollbar-track {/*滚动条里面轨道*/box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);border-radius: 0;background: rgba(0, 0, 0, 0.1);}

JS：

需要引用一下jquery：<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

$(function () {//生成表格内容let htmlLeft = '';let htmlRight = '';for (let i = 1; i <= 7; i++) {htmlLeft += '<tr>';htmlLeft += '<td>' + i + '</td>';htmlLeft += '</tr>';}for (let i = 1; i <= 7; i++) {htmlRight += '<tr>';htmlRight += '<td>A</td>';htmlRight += '<td>100</td>';htmlRight += '<td>500</td>';htmlRight += '<td>1</td>';htmlRight += '</tr>';}$('#left-table2').html(htmlLeft);$('#right-table2').html(htmlRight);//滚动$('#right-div2').on('scroll', function () {let top = $(this).scrollTop();let left = $(this).scrollLeft();$('#left-div2').scrollTop(top);$('#right-div1').scrollLeft(left);})});

html表格table表头和首列固定相关推荐

table表头和首列的表格固定-CSS实现的Table表头固定
效果就是上图表头是固定的, 跟随滑动轴动,左边第一列也是可以跟谁滑动轴滚动下面是代码原文是查看 <!DOCTYPE html> <html> <head> &l ...
table表头和首列的表格固定-JQuery、js实现的Table表头固定
这个是最简单的方法,基于jQuery的解决方案,引入一个两个js就可以解决,当然也有使用css, position: sticky,这个我下一章节会讲它的优缺点,当然为了凸显jQuery的优点, 我就 ...
table固定表头和首列
table固定表头和首列 html部分,结构上分为左右两部分,又分别拆开为上下两部分,总共四个结构部分,以下为固定首行和首列,需要固定多行多列的可以自行添加,如下列表中姓名为左上角固定不变的位置,可自 ...
纯CSS实现Table固定表头和首列
Table固定表头和首列这种需求应该比较常见.以往的做法,需要写一大堆脚本,而现在,可以使用position:sticky轻松实现这个效果. .table-container {width: 100% ...
bootstrap-table、antd-table组件(react)实现首行、首列固定的表格
小剧情成本系统规划使用react,可是基于业务需要离不开老版OA(bootstrap jquery)中的工作流,本来是可以尽情使用react的,前边挡头大象的无力感还是有的. 多次开会渴望的眼神盯着 ...
纯css position:sticky 实现表格首行和首列固定
目录 1.认识position:sticky 2.position:sticky小栗子-实现表格首行和首列固定 2.1 效果图 2.2 代码 1.认识position:sticky 我们先来了解一个c ...
WPF DataGrid 通过自定义表头模拟首行固定
WPF DataGrid 通过自定义表头模拟首行固定独立观察员 2021 年 9 月 25 日最近工作中要在 WPF 中做个表格,自然首选就是 DataGrid 控件了.问题是,UI 设计的表格是 ...
Table表头与数据列对齐问题解决方案
Table表头与数据列对齐问题解决方案参考文章: (1)Table表头与数据列对齐问题解决方案 (2)https://www.cnblogs.com/peter1/p/8888714.html 备忘 ...
微信小程序 table表格固定表头和首列右侧表格可以左右滚动（多种表格演练）
最近在做公司的项目需要到表格展示数据,但是微信小程序是没有原生table标签的,于是就百度各种搜...发现结构有类似的就粘过来修改,要善于学习和借鉴别人的经验使其变成为自己的东西,学无止境~ 在这里做 ...

html表格table表头和首列固定

html表格table表头和首列固定相关推荐

最新文章

热门文章