table表格,thead固定,tbody滚动

2023-10-07 18:30

本文主要是介绍table表格,thead固定,tbody滚动,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

用Vue.js实现element-ui表格实现自动滚动

table表格,thead固定,tbody滚动

效果图:
在这里插入图片描述

      <table cellspacing="0"><thead><tr><th>排名</th><th>城市</th><th>今年上报数</th><th>去年上报数</th><th>差值</th></tr></thead><tbody><tr v-for="(item, index) in tableData" :key="index"><td>{{ item.rank }}</td><td>{{ item.city }}</td><td>{{ item.number }}</td><td>{{ item.lastNumber }}</td><td>{{ item.difference }}</td></tr></tbody></table>
      tableData: [{ rank: 1, city: '宜昌市', number: 71, lastNumber: 15, difference: 56 },{ rank: 2, city: '黄冈市', number: 70, lastNumber: 8, difference: 62 },{ rank: 3, city: '襄阳市', number: 67, lastNumber: 11, difference: 56 },{ rank: 4, city: '孝感市', number: 59, lastNumber: 6, difference: 53 },{ rank: 5, city: '恩施州', number: 53, lastNumber: 18, difference: 35 },{ rank: 6, city: '荆州市', number: 52, lastNumber: 10, difference: 42 },{ rank: 7, city: '十堰市', number: 51, lastNumber: 38, difference: 13 },{ rank: 8, city: '咸宁市', number: 42, lastNumber: 27, difference: 15 },{ rank: 9, city: '黄石市', number: 32, lastNumber: 22, difference: 10 },{ rank: 10, city: '武汉市', number: 30, lastNumber: 12, difference: 18 },{ rank: 11, city: '荆门市', number: 29, lastNumber: 9, difference: 20 },{ rank: 12, city: '随州市', number: 22, lastNumber: 7, difference: 15 },{ rank: 13, city: '鄂州市', number: 9, lastNumber: 7, difference: 2 },{ rank: 14, city: '仙桃市', number: 7, lastNumber: 4, difference: 3 },{ rank: 15, city: '潜江市', number: 7, lastNumber: 4, difference: 3 },{ rank: 16, city: '天门市', number: 7, lastNumber: 4, difference: 3 },]
    table {width: 100%;height: 600px;font-size: 14px;text-align: center;/*设置相邻单元格的边框间的距离*/border-spacing: 0;/*表格设置合并边框模型*/border-collapse: collapse;thead {display: table;width: calc(100% - 6px);height: 40px;color: #03e6f4;font-weight: 400;table-layout: fixed; // 表格固定th {border: 1px solid #fff;}}tbody {display: block;height: calc(100% - 40px);width: calc(100% - 6px);color: #fff;overflow-y: auto;tr {display: table;width: 100%;table-layout: fixed;height: 40px;td {border: 1px solid #fff;// overflow: hidden;// white-space: nowrap;// text-overflow: ellipsis;}}tr:hover {background-color: #08a850;}}}/* 滚动条宽度 */
::-webkit-scrollbar {width: 5px;background-color: transparent;
}/* 滚动条滑块 */
::-webkit-scrollbar-thumb {// border-radius: 5px;// -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);background: #fff;
}/* 滚动条轨道 */
::-webkit-scrollbar-track {// -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);// border-radius: 5px;background: #8b8989;
}

滚动条样式设置

【CSS】关于滚动条样式

这篇关于table表格,thead固定,tbody滚动的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/159639

相关文章

使用Python实现表格字段智能去重

《使用Python实现表格字段智能去重》在数据分析和处理过程中,数据清洗是一个至关重要的步骤,其中字段去重是一个常见且关键的任务,下面我们看看如何使用Python进行表格字段智能去重吧... 目录一、引言二、数据重复问题的常见场景与影响三、python在数据清洗中的优势四、基于Python的表格字段智能去重

禁止HTML页面滚动的操作方法

《禁止HTML页面滚动的操作方法》:本文主要介绍了三种禁止HTML页面滚动的方法:通过CSS的overflow属性、使用JavaScript的滚动事件监听器以及使用CSS的position:fixed属性,每种方法都有其适用场景和优缺点,详细内容请阅读本文,希望能对你有所帮助... 在前端开发中,禁止htm

Ubuntu固定虚拟机ip地址的方法教程

《Ubuntu固定虚拟机ip地址的方法教程》本文详细介绍了如何在Ubuntu虚拟机中固定IP地址,包括检查和编辑`/etc/apt/sources.list`文件、更新网络配置文件以及使用Networ... 1、由于虚拟机网络是桥接,所以ip地址会不停地变化,接下来我们就讲述ip如何固定 2、如果apt安

如何利用Python实现给Excel表格截图

《如何利用Python实现给Excel表格截图》这篇文章主要为大家详细介绍了如何利用Python实现给Excel表格截图功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 我搜索了网络上的方案,感觉把 Excel 表格转换为 html 再用 platwright 截图是比China编程较顺

vue基于ElementUI动态设置表格高度的3种方法

《vue基于ElementUI动态设置表格高度的3种方法》ElementUI+vue动态设置表格高度的几种方法,抛砖引玉,还有其它方法动态设置表格高度,大家可以开动脑筋... 方法一、css + js的形式这个方法需要在表格外层设置一个div,原理是将表格的高度设置成外层div的高度,所以外层的div需要

使用SQL语言查询多个Excel表格的操作方法

《使用SQL语言查询多个Excel表格的操作方法》本文介绍了如何使用SQL语言查询多个Excel表格,通过将所有Excel表格放入一个.xlsx文件中,并使用pandas和pandasql库进行读取和... 目录如何用SQL语言查询多个Excel表格如何使用sql查询excel内容1. 简介2. 实现思路3

Python在固定文件夹批量创建固定后缀的文件(方法详解)

《Python在固定文件夹批量创建固定后缀的文件(方法详解)》文章讲述了如何使用Python批量创建后缀为.md的文件夹,生成100个,代码中需要修改的路径、前缀和后缀名,并提供了注意事项和代码示例,... 目录1. python需求的任务2. Python代码的实现3. 代码修改的位置4. 运行结果5.

Prompt - 将图片的表格转换成Markdown

Prompt - 将图片的表格转换成Markdown 0. 引言1. 提示词2. 原始版本 0. 引言 最近尝试将图片中的表格转换成Markdown格式,需要不断条件和优化提示词。记录一下调整好的提示词,以后在继续优化迭代。 1. 提示词 英文版本: You are an AI assistant tasked with extracting the content of

vue2实践:el-table实现由用户自己控制行数的动态表格

需求 项目中需要提供一个动态表单,如图: 当我点击添加时,便添加一行;点击右边的删除时,便删除这一行。 至少要有一行数据,但是没有上限。 思路 这种每一行的数据固定,但是不定行数的,很容易想到使用el-table来实现,它可以循环读取:data所绑定的数组,来生成行数据,不同的是: 1、table里面的每一个cell,需要放置一个input来支持用户编辑。 2、最后一列放置两个b

关于使用cspreadsheet读写EXCEL表格数据的问题

前几天项目有读写EXCEL表格的需求,我就找了大概有几种,大致分为:COM方法、ODBC方法、OLE方法、纯底层格式分析方法。由于COM方法要求必须安装有OFFICE的EXCEL组件,纯底层格式分析方法又很多功能需要自行去完善,所有最终选择了数据库的方法,用数据库的方法去存取xls格式的数据。网上有一个高手写的CSpreedSheet,看了一下提供的接口,感觉挺好用的。在使用的过程中发现几个