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

相关推荐
A黄俊辉A12 小时前
axios+ts封装
开发语言·前端·javascript
小李小李不讲道理12 小时前
「Ant Design 组件库探索」四:Input组件
前端·javascript·react.js
连合机器人13 小时前
晨曦中的守望者:当科技为景区赋予温度
java·前端·科技
郑板桥3013 小时前
tua-body-scroll-lock踩坑记录
前端·javascript
BillKu13 小时前
vue3 样式 css、less、scss、sass 的说明
css·less·sass·scss
解道Jdon13 小时前
SpringBoot4与Spring7发布:云原生深度进化
javascript·reactjs
慢半拍iii14 小时前
JAVA Web —— A / 网页开发基础
前端
gnip14 小时前
pnpm 的 monorepo架构多包管理
前端·javascript
zolty15 小时前
基于hiprint的票据定位打印系统开发实践
javascript
新手村领路人16 小时前
Firefox自定义备忘
前端·firefox