前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >把iview的table做成更适合展现大量数据的样式(字体变小、去除多余的padding等)

把iview的table做成更适合展现大量数据的样式(字体变小、去除多余的padding等)

作者头像
liulun
发布2020-01-15 17:16:00
1.2K0
发布2020-01-15 17:16:00
举报
文章被收录于专栏:liulunliulun
代码语言:javascript
复制
<style>
    .ivu-table {
        font-size: 12px !important;
    }

    .ivu-table-header thead tr th {
        padding: 0px !important;
        height: 26px;
        line-height: 26px;
    }

    .ivu-table-fixed-header thead tr th {
        padding: 0px !important;
        height: 26px;
        line-height: 26px;
        font-size: 12px;
    }

    .ivu-table-fixed-right-header {
        height: 29px !important;
    }

    .ivu-table-cell {
        white-space: nowrap !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .ivu-table td, .ivu-table th {
        height: 26px;
        line-height: 26px;
    }
</style>
代码语言:javascript
复制
            let ele = this.$el;
            this.height = ele.clientHeight;
            this.width = ele.clientWidth;
            this.showTable = true;
            window.onresize = () => {
                this.showTable = false;
                this.$nextTick(() => {
                    this.height = ele.clientHeight;
                    this.width = ele.clientWidth;
                    this.showTable = true;
                })
            }
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-01-06 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档