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

相关推荐
openKaka_7 分钟前
为什么 React 18 之后使用 createRoot,而不是 ReactDOM.render
前端·javascript·react.js
WindrunnerMax17 分钟前
基于 Markdown-It 的无序列表折叠插件
前端·javascript·github
剑神一笑19 分钟前
CSS Loading 动画生成器
前端·css
神三元26 分钟前
最近半年,我做了个 AI-Native 的 Agent 从零到进阶教程
前端·javascript·面试
XiYang-DING40 分钟前
jQuery
前端·javascript·jquery
Morwit40 分钟前
【力扣hot100】 221. 最大正方形
前端·算法·leetcode
明月_清风1 小时前
关于node 模块化的现状与未来
前端·node.js
老王以为1 小时前
从源码到架构:React useActionState 深度剖析
前端·javascript·react.js
前端超有趣1 小时前
详解JavaScript中encodeURIComponent和decodeURIComponent的使用(附实战场景)
前端·javascript
XinZong1 小时前
业余抱团搞副业:基于OpenClaw做了一款AI社交虾聊,产品做完了,求运营思路
javascript