当前位置: 首页 > article >正文

css-表格样式

滑动表格

外层嵌套一个盒子设置固定大小,并添加overflow:hidden auto只有y轴滑动,隐藏x轴滑动

表头固定不滑动可以添加position:sticky;top:0

  <div style="width:878px;height:685px;overflow:hidden auto" class="tableDiv">
        <n-table class="Tab-1-table">
          <thead style="position:sticky;top:0">

          </thead>
          <tbody>

          </tbody>
        </n-table>
      </div>
    </div>
  </div>

不想显示滑动条可以添加:

    .tableDiv::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }

使表格不超出固定宽度,文字自适应换行

  .Tab-1-table {
      table-layout: fixed;
      word-break: break-word;
      word-wrap: break-word;
   }

表格组件:https://www.naiveui.com/zh-CN/os-theme/components/table


http://www.kler.cn/news/108794.html

相关文章:

  • 【Java 进阶篇】解决Java Web应用中请求参数中文乱码问题
  • Python Wordcloud报错:Only supported for TrueType fonts,多种解决方案
  • 97. 交错字符串
  • Go学习第十二章——Go反射与TCP编程
  • 如何使用drawio画流程图以及导入导出
  • 微服务parent工程和子工程pom文件配置注意
  • 基于Qt 文本读写(QFile/QTextStream/QDataStream)实现
  • C++编程题目------平面上的最接近点对(分治算法)
  • C++设计模式_13_Flyweight享元模式
  • 漏洞复现-showdoc文件上传_v2.8.3_(CNVD-2020-26585)
  • Python环境下LaTeX数学公式转图像方案调研与探讨
  • 【大数据Hive】hive 表数据优化使用详解
  • 西工大CSAPP第二章课后题2.55答案及解析
  • 什么是程序化交易
  • 计算机网络--第一次作业
  • C51--PWN-舵机控制
  • 直线模组怎么分类?
  • 在JS中,var 、let 、const 总结
  • ENSP L2TP 配置
  • springboot 配置文件加载顺序
  • 微信小程序vue+uniapp旅游景点门票预订系统 名胜风景推荐系统
  • End-to-End Adversarial-Attention Network for Multi-Modal Clustering
  • leetCode 260.只出现一次的数字 ||| + 位运算
  • 这个故事有点长 - 舟山
  • 洛谷 B2135:单词替换
  • 2022年上半年上午易错题(软件设计师考试)
  • 信息检索与数据挖掘 | 【实验】排名检索模型
  • Cesium弹窗可随地图移动
  • 神经网络与深度学习第四章前馈神经网络习题解答
  • 搞定蓝牙-第六篇(HID