antd option宽度自适应_WordPress文章中添加自适应宽度的表格——墨涩网

8bb40aa3c929bc44476637a94e87c497.png

WordPress文章中添加自适应表格,前面写文章的时候需要用到表格来表达阵列信息,但是在WordPress添加表格不想是在office中那样方便,需要借助插件或者代码才可以实现,今天分享一个不需要安装插件纯代码实现WordPress文章中添加自适应表格的方法,表格可以实现文字字体居中色彩属性、自定义行数列数、插入图片等操作。

教程开始

WordPress编辑文章切换到文本编辑模式,将下面代码添加进去,并修改其中的文字:

自适应表格

自适应表格 输入文字 自适应表格 输入文字

效果如下:

882db43470f987897fbeb6c3e5e5e6a4.png

一:如果想添加更多行。

多复制几个

...这样的代码组合即可。

自适应表格

自适应表格 输入文字 自适应表格 输入文字 自适应表格 输入文字 自适应表格 输入文字

效果如下:

4f894901f7f3b3bdea91671aa78c6daf.png

二:如果想对添加更多列。

上面是两栏自适应表格,如果需要多栏自适应表格,可以将代码中的“50%”修改成需要的数字。3栏修改成“33.33%”,四栏修改成“25%”等,以此类推即可,也可以设置不同的列宽度。

自适应表格

序号 自适应表格 输入文字 备注 序号 自适应表格 输入文字 备注

效果如下:

8850e414d1ecda999b25f2307455509a.png

三:如果想修改文字字体、居中、色彩等信息。

可以在Wordpress的可视化编辑器中选择中需要修改的文字,直接在上方的文字属性栏设置即可。

91dc7b6ac48388770348da4caa6107e0.png

效果如下:

8f547ea5fdb5fc672b961f0b3c9f3848.png

四:如果想在表格中添加图片

可以在Wordpress的可视化编辑器中直接将光标插入需要插入图片的表格中,添加媒体图片即可。

66a8fa65957b143857d67f39d8c4798c.png

效果如下:

40864a8cf80d1c4510f8f63d970a0645.png

总体效果预览

933f01993c09315a7e5951e2f585b475.png
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现antd表格高度自适应,有几种方法可以尝试。首先,通过修改组件的width属性为minWidth属性来解决表格自适应宽度的问题。具体做法是在columns数组的每个对象将width属性改为minWidth属性,例如:{ title: '账户名', key: 'accountName', fixed: 'left', minWidth: 150 }。这样就可以确保表格宽度不会溢出容器。 其次,如果想要让分页部分的底边自适应屏幕高度,可以使用CSS选择器::v-deep和calc()函数来设置表格的高度。例如,使用以下CSS代码可以实现分页部分底边自适应屏幕高度的效果:.ant-table { height: calc(100vh - 170px); }。这样就可以确保表格的高度在不同屏幕大小下自适应。 另外,如果需要实现表格内容区域可以滚动的效果,可以使用以下CSS代码设置表格的高度和滚动属性:.ant-table-scroll { height: calc(100vh - 170px); overflow: auto scroll; }。这样就可以在表格内容超出容器高度时显示滚动条。 此外,还可以通过监听窗口大小变化来动态修改表格的高度。可以在mounted钩子函数添加window.onresize事件监听窗口大小的变化,并使用document.body.clientHeight来获取窗口的高度。然后根据这个值来修改表格的高度。具体做法可以参考以下代码: ```typescript // 在组件内部 public clientHeight = 0; // 监听视窗大小变化 mounted() { const that = this; window.onresize = () => { return (() => { that.clientHeight = document.body.clientHeight; // 可在这里进行修改操作 // ... })(); }; } // Watch监听clientHeight属性,并在回调函数内部进行修改操作 @Watch('clientHeight') private getHeight() { // 修改操作 // ... } ``` 通过上述方法,可以实现antd表格的高度自适应。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值