使用antd的Row、Col组件绘制word申请表

背景

想到用Row,Col绘制word申请表,首先他的span属性调节可能更方便一些,而且整体使用起来也是React风格,避免了使用tr, td这种原生的标签带来一系列属性错误以及不兼容。
当然了我使用tr,td完成了一版,踩了一些坑,如果你想用这种方式,希望这篇文章可以帮到你。

开始coding

说一句,嫌啰嗦直接拉到最后,拷贝一下就能用。
当我一开始使用的时候JS文件代码是这样的。

<div className='trrdd'>
    <Row>
        <Col span={4}>XXXXX</Col>
        <Col span={4}>XXXXX</Col>
        <Col span={4}>XXXXX</Col>
        <Col span={4}>XXXXX</Col>
    </Row>
    <Row>
        <Col span={4}>XXXXX</Col>
        <Col span={4}>XXXXX</Col>
        <Col span={4}>XXXXX</Col>
        <Col span={4}>XXXXX</Col>
    </Row>
</div>

css是这样的

.trrdd .ant-col-4 {
    border: 1px solid #000;
}

当然了我感觉第一步可能一般人都会这样写吧,那我们看到的效果如图:
在这里插入图片描述

我们知道tr,td是专门用来生成table的,只要设置一个属性border-collapse:collapse就可以避免边框重叠。但是Row, Col可以当div用的,所以就出现了边框重叠现象。
解决方案呢,想一想如果把每个框框微调一下位置,让相邻的两条边框相互覆盖,而不是紧挨着形成一条2px的边框。margin属性可以接收四个值,顺序分别为上、右、下、左。

好了,再说一个关键的地方,不知道大家会不会有的时候发现自己写margin-right/margin-bottom属性不起作用,由于浏览器元素的排列是从左向右,所以如果你给左边的一个元素设置一个margin-right:-1px,这个时候考虑显示效果为像左移动1px,但是在标准流中显示效果并没有发生变化,但是如果打开控制台,如果右边有其他元素,其他元素是会向左移动的,因为这个设置了margin-right的元素占据的位置已经向左移动了1px,只是显示效果还是和没移动之前一样,margin-bottom也同理。

这个时候结果也很明显了,既然设置margin-right:-1,左边的元素相对于右边紧挨着的元素显示效果位置不会动,而且每2个栅格都会产生一次这种效应,通过这种方式可以实现一些很巧妙的操作。

结论

.trrdd .ant-col-4 {
    border: 1px solid #000;
    margin: 0px -1px -1px 0px;
}

最后的展示效果如图:
在这里插入图片描述

多说一句

这样的css样式,是可以影响到antd的默认样式的,可能因为这些代码文件写到了.less文件中吧。更多的修改antd默认样式的知识可以参考:antd修改默认样式

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值