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

相关推荐
OpenTiny社区8 小时前
AI 生成的 Vue 代码,终于能直接用了!
前端·vue.js·github
程序员大阳8 小时前
副队长JavaScript教程(67)-Ajax初识:背景、历史与核心概念
javascript·ajax·同步·异步·概念·背景·来是
程序员大阳8 小时前
副队长JavaScript教程(70)-Ajax同源策略与跨域
javascript·ajax·同源策略·跨越·corp
Ramble_Naylor9 小时前
Rust深度解读:高性能 Web 网关与 Axum 架构剖析
前端·架构·rust
程序员飞哥9 小时前
AI 编程额度怎么用才不浪费?
java·前端·后端
柳杉9 小时前
用 Codex 魔改卡神开源的 AIHOT,我做了个 3D 技术雷达
前端·aigc
王亚博_Abel9 小时前
AI 编程时代怎么选前端框架?同一个应用让 Agent 用 12 种框架各写 5 遍,我整理出这套选型方法
前端·人工智能·前端框架
不在逃避q9 小时前
Chrome 扩展安全攻防实录:从攻击面到防御实践
前端·chrome·安全
砚凝霜9 小时前
保姆级 | CTF Lemon:禁用右键/F12 怎么破?查看源码 + HTML 注释拿 flag
前端·html
IT_陈寒9 小时前
Vite开发实战:从入门到精通
前端·人工智能·后端