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

相关推荐
yqcoder12 小时前
拆解互联网:通俗易懂的网络分层模型
前端·网络·网络协议
小鹿软件办公12 小时前
Mozilla 解释 Firefox 在英特尔 Raptor Lake 系统上的崩溃问题
前端·firefox
代码熊崽的编程森林12 小时前
vue + onlyoffice 自定义插件的实现(OnlyOffice 插件:AI 智能编辑)。
前端·javascript·vue.js
Lucky_Turtle12 小时前
【Vue】element plus Slider小数组件设置顺滑程度
前端·javascript·vue.js
Bigger13 小时前
🔥 一份 Agent 工程岗 JD,暴露了市场真正想要什么样的人
前端·agent·全栈
我头上有犄角ovo13 小时前
我在微信小程序里手搓人脸识别引导,结果被“右转头”和“手遮脸”教育了
前端
David_Xia13 小时前
干爆 11s 提交卡顿!引入 Rust 级 oxlint 彻底拯救团队 Git Commit 噩梦的重构实践
前端
前端环境观察室13 小时前
别急着让 Agent 跑任务,先把浏览器环境上下文建模
前端
Dxy123931021613 小时前
js中Math.min.apply()详解
开发语言·javascript
蝎子莱莱爱打怪13 小时前
零基础用AI写App?兄弟😂 醒醒吧,那只是个玩具罢了!
前端·人工智能·后端