使用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修改默认样式