当前位置: 首页 > 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/a/108794.html

相关文章:

  • 力扣 LeetCode 977. 有序数组的平方(Day1:数组)
  • 类型转换指令及方法调用与返回指令
  • 【大数据学习 | HBASE】hbase的读数据流程与hbase读取数据
  • 数据重塑:长宽数据转换【基于tidyr】
  • Python学习从0到1 day27 Python 高阶技巧 ③ 设计模式 — 单例模式
  • hive数据查询语法
  • 【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 配置文件加载顺序