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

相关推荐
jakeswang18 分钟前
查询条件与查询数据的ajax拼装
前端·ajax
samuel91819 分钟前
axios取消重复请求
前端·javascript·vue.js
三天不学习21 分钟前
JiebaAnalyzer 分词模式详解【搜索引擎系列教程】
前端·搜索引擎·jiebaanalyzer
滿29 分钟前
Vue 3 中按照某个字段将数组分成多个数组
前端·javascript·vue.js
安分小尧40 分钟前
[特殊字符] 使用 Handsontable 构建一个支持 Excel 公式计算的动态表格
前端·javascript·react.js·typescript·excel
好_快1 小时前
Lodash源码阅读-baseClone
前端·javascript·源码阅读
Double Point1 小时前
(三十一) Dart 中的网络请求教程:从知乎日报 API 获取数据
前端
excel1 小时前
webpack 核心编译器 十二 节
前端
好_快1 小时前
Lodash源码阅读-baseToString
前端·javascript·源码阅读
好_快1 小时前
Lodash源码阅读-initCloneByTag
前端·javascript·源码阅读