【React_Antd】Table样式修改
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了【React_Antd】Table样式修改相关的知识,希望对你有一定的参考价值。
参考技术A React项目中,使用antd中的Table组件,其样式略有些死板。下面记录一些常见的样式修改问题,及解决方法。一共有三种方法。
React定义columns的时候,title属性的值,可以是dom。所以在这儿添加div就可以了。其样式会覆盖table原本的背景。
扣一张矩形的背景透明的斜线图片出来,作为表头所在div的背景。这样,当表头所在div发生变化时,背景图片也会随着变化。
缺点 :
线的粗细也会发生变化。变化幅度小时不明显,如果拉得特别大,线会变粗,像素可能会不够。
其他 :
Svg图片不知道可不可以。。。
建议从这里抄作业:https://blog.csdn.net/weixin_42304808/article/details/106352850
注意每个属性的后面有逗号,颜色自己改
直接对背景div添加斜线,上层要显示的内容,做好排版即可
如果表头有两个,那么也可以看成是4个拼在一起
第2和第3块显示内容,第1和第4块显示斜线,也可以
直接一个div,高度设为1px,你就能得到一条直线了(也可以把div的某一条border边框作为直线)。通过css中的旋转属性,即可得到斜线。
每个column,利用其title.length*18+20作为其width值,每一列的宽度都能自适应其表头字数。
但是如果要让列宽适应于非表头部分,可能还要另想办法
Scollar属性中的x设置为"max-content"
每一列width根据title长度动态生成
Scollar属性中的y设置为true,再在样式文件中,设置其max-height。
这样做的好处是,max-height的大小可以根据其父组件的高度自适应。适用于某些情况
以上是关于【React_Antd】Table样式修改的主要内容,如果未能解决你的问题,请参考以下文章