Handsontable - vue-handsontable Excel 表格太长导致样式错乱问题

简介: Handsontable - vue-handsontable Excel 表格太长导致样式错乱问题

如果表头数据太多,页面就特别宽,滚动条会带着整个页面滑动,就像这样。

image.png其实这不算是这个插件的问题,但是我为此也纠结了很久。所以记录一下,这种超出的部分要 overflow: auto,只需要给这个盒子本身,再套一个盒子。image.png

第一层 overflow: hidden;第二层 overflow: auto。

就可以在当前页面滑动了,对了,一定要给第一层盒子定高度!不然表格根本不会出来。(定高虽然丑了点,但是总比整个页面滑动好看多了。

CSS 代码

#example-containerheight: 1000px.overfwidth: 100%height: 100%overflow: hidden.wrapperwidth: 100%height: 100%overflow: auto
目录
相关文章
|
11月前
|
移动开发 JavaScript
(H5查看CAD)网页CAD提取图纸表格到excel
本文介绍如何通过自定义MxCAD插件,在Web端智能识别CAD图纸中的表格,实现自动合并与高效导出至Excel,提升数据提取效率与准确性。内容涵盖区域选择、图形识别、表格结构重建、单元格合并及内容导出等关键技术,适用于工程图纸数据自动化处理场景。
|
Java API Apache
Java编程如何读取Word文档里的Excel表格,并在保存文本内容时保留表格的样式?
【10月更文挑战第29天】Java编程如何读取Word文档里的Excel表格,并在保存文本内容时保留表格的样式?
1266 5
|
JavaScript 前端开发 数据可视化
20.6K star!Excel级交互体验!这款开源Web表格神器绝了!
Handsontable 是一款功能强大的 JavaScript 数据表格组件,提供类 Excel 的交互体验。支持实时协作、数据绑定、公式计算等企业级功能,可轻松集成到 React/Vue/Angular 等主流框架。
3004 11
|
人工智能 数据可视化 前端开发
Probly:开源 AI Excel表格工具,交互式生成数据分析结果与可视化图表
Probly 是一款结合电子表格功能与 Python 数据分析能力的 AI 工具,支持在浏览器中运行 Python 代码,提供交互式电子表格、数据可视化和智能分析建议,适合需要强大数据分析功能又希望操作简便的用户。
1896 2
|
SQL 数据可视化 数据挖掘
想让Excel表格设计更美观?试试这几款好用工具!
Excel表格设计在项目管理和数据分析中至关重要。本文推荐四款辅助工具:板栗看板、Excel自动图表助手、Think-Cell Chart 和 Power BI,分别在任务管理、图表生成、数据可视化等方面表现突出,帮助你设计出更专业、美观的表格。
2086 2
|
JavaScript 前端开发 数据处理
Vue导出el-table表格为Excel文件的两种方式
Vue导出el-table表格为Excel文件的两种方式
1245 6
|
前端开发 JavaScript
使用Vue+xlsx+xlsx-style实现导出自定义样式的Excel文件
本文介绍了在Vue项目中使用`xlsx`和`xlsx-style`(或`xlsx-style-vite`)库实现导出具有自定义样式的Excel文件的方法,并提供了详细的示例代码和操作效果截图。
3206 2
使用Vue+xlsx+xlsx-style实现导出自定义样式的Excel文件
|
前端开发 JavaScript API
前端基于XLSX实现数据导出到Excel表格,以及提示“文件已经被损坏,无法打开”的解决方法
前端基于XLSX实现数据导出到Excel表格,以及提示“文件已经被损坏,无法打开”的解决方法
1833 0
|
Java Apache
Apache POI java对excel表格进行操作(读、写) 有代码!!!
文章提供了使用Apache POI库在Java中创建和读取Excel文件的详细代码示例,包括写入数据到Excel和从Excel读取数据的方法。
2252 0
|
人工智能 BI
用ChatGPT做excel表格真香!只需动嘴提要求和复制粘贴
用ChatGPT做excel表格真香!只需动嘴提要求和复制粘贴
956 0