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

相关推荐
五点六六六7 小时前
基于 AST 与 Proxy沙箱 的局部代码热验证
前端·设计模式·架构
发现一只大呆瓜9 小时前
SSO单点登录:从同域到跨域实战
前端·javascript·面试
发现一只大呆瓜9 小时前
告别登录中断:前端双 Token无感刷新
前端·javascript·面试
Cg1362691597410 小时前
JS-对象-Dom案例
开发语言·前端·javascript
无限大611 小时前
《AI观,观AI》:善用AI赋能|让AI成为你深耕核心、推进重心的“最强助手”
前端·后端
烛阴11 小时前
Claude Code Skill 从入门到自定义完整教程(Windows 版)
前端·ai编程·claude
lxh011311 小时前
数据流的中位数
开发语言·前端·javascript
神仙别闹11 小时前
基于NodeJS+Vue+MySQL实现一个在线编程笔试平台
前端·vue.js·mysql
zadyd12 小时前
Workflow or ReAct ?
前端·react.js·前端框架
北寻北爱14 小时前
vue2和vue3使用less和scss
前端·less·scss