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

相关推荐
import_random几秒前
[python]miniconda(安装)
前端
云梦谭6 分钟前
AI 生成的FreeSWITCH 呼出流程深度分析freeswitch-1.10.12.-release
java·前端·php
秃了才能变得更强10 分钟前
React Native小技巧
前端
一只爱吃糖的小羊11 分钟前
React 19 vs Vue 3:深度对比与选型指南
前端·vue.js·react.js
我也想好好学习11 分钟前
使用Promise实现串行执行异步任务,含出错重试功能
javascript
前端老宋Running12 分钟前
Vue 3 的“降维打击”:Composition API 是如何让 Mixin 成为历史文物的?
前端·javascript·vue.js
Pluto_CRown12 分钟前
H5 开发的各类小知识点
前端·javascript
Pluto_CRown12 分钟前
上下文存储【下】
前端·javascript
AAA阿giao13 分钟前
JavaScript 中基于原型和原型链的继承方式详解
前端·javascript·面试
用户6000718191015 分钟前
【翻译】如何在Vue中使用Suspense处理异步渲染?
前端