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

相关推荐
小猪努力学前端8 分钟前
基于PixiJS的小游戏广告开发
前端·webgl·游戏开发
哆啦A梦158814 分钟前
62 对接支付宝沙箱
前端·javascript·vue.js·node.js
Tzarevich25 分钟前
用 OOP 思维打造可复用的就地编辑组件:EditInPlace 实战解析
javascript·前端框架
用户81686947472526 分钟前
Lane 优先级模型与时间切片调度
前端·react.js
虎头金猫26 分钟前
MateChat赋能电商行业智能导购:基于DevUI的技术实践
前端·前端框架·aigc·ai编程·ai写作·华为snap·devui
LiuMingXin26 分钟前
CESIUM JS 学习笔记 (持续更新)
前端·cesium
豆苗学前端36 分钟前
面试复盘:谈谈你对 原型、原型链、构造函数、实例、继承的理解
前端·javascript·面试
Crystal3281 小时前
Git 基础:生成版本、撤消操作、版本重置、忽略文件
前端·git·github
lichenyang4531 小时前
React 组件通讯全案例解析:从 Context 到 Ref 的实战应用
前端
国服第二切图仔1 小时前
Electron for 鸿蒙pc项目实战之右键菜单组件
javascript·electron·harmonyos·鸿蒙pc