react下绘制word申请表

背景

最近项目里有个需求，绘制一个word表格，就类似大学的时候填写的那种表格。

开门见山

为了不耽误大家时间，我先说结论，如果你的代码拿到react环境中参差不齐了，可能是你把colspan这个属性放到style里面了，然而这个属性属于标签的固有属性，放到style中是起不到作用的。

拿到这个需求之后我首先想到了tr,td的方式来绘制，然后绘制的效果大概是这样。

代码如下：

<!DOCTYPE html>
<html>
 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>这是一个word模板</title>
</head>
<style type="text/css">
	body{
		width: 800px;
	}
	h2{
		margin:0 auto;
		text-align: center;
	}
	table{
		border-collapse:collapse;
		margin: 0 auto;
		text-align: center;
	}
	table p{
		display: inline-block;
		text-align: right;
		margin-top: 70px;
	}
</style>
<body>
	<h2>XXX</h2>
	<table border="1">
		<tr>
			<td height="60;" colspan="1" width="118px">XXX</td>
			<td colspan="3">XXX-XXX</td>
			<td colspan="1" width="118px">XXX</td>
			<td colspan="1">XXX</td>
		</tr>
		<tr>
			<td height="60;" align="center">XXX</td>
			<td colspan="3">XXX</td>
			<td >XXX</td>
			<td >王伟</td>
		</tr>
		<tr>
			<td height="60;" align="center">施工员</td>
			<td colspan="1">杨幂</td>
			<td>XXX</td>
			<td colspan="1">100</td>
			<td>XXX</td>
			<td >95</td>
		</tr>
		<tr>
			<td height="60" >XXX</td>
			<td colspan="5"> 国家2000 - ISO-9001</td>
		</tr>
		<tr>
			<td colspan="6" height="200">
				lskjdflsl快解放拉萨扩大金佛i极恶非理科生的积分来说点击发送i阿娥姐分厘卡三季稻法律是螺丝扣江东父老塞恩辣椒粉拉萨扩大金佛i额就立刻就啦快睡觉哦这拉开僵尸地方
			</td>
		</tr>
		<tr>
			<td height="60;" align="center">XXX</td>
			<td colspan="1">杨幂</td>
			<td>XXX</td>
			<td colspan="1">100</td>
			<td>XXX</td>
			<td >95</td>
		</tr>
		<tr>
			<td height="60;" align="center">XXX</td>
			<td colspan="1">杨幂</td>
			<td>XXX</td>
			<td colspan="1">100</td>
			<td>XXX</td>
			<td >95</td>
		</tr>
		<tr>
			<td colspan="6">XXX</td>
		</tr>
		<tr>
			<td>XXX</td>
			<td colspan="2">XXX</td>
			<td>XXX</td>
			<td colspan="2">XXX</td>
		</tr>
		<tr>
			<td height="110" >XXX</td>
			<td colspan="5">
				<div>
					<p>XXX：</p>
					<p style='margin-left:300px'>年</p>
					<p style='margin-left:30px'>月</p>
					<p style='margin-left:30px'>日</p>
				</div>
			</td>
		</tr>
		<tr>
			<td height="110" >XXX</td>
			<td colspan="5">
				<div>
					<p>XXX：</p>
					<p style='margin-left:300px'>年</p>
					<p style='margin-left:30px'>月</p>
					<p style='margin-left:30px'>日</p>
				</div>
			</td>
		</tr>
	</table>
	<div style="width:610px;margin:0 auto;">
		<p>注：附验收过程照片及说明</p>
		<p style="text-indent:2em;">2、本表解释权归XXXXXXXX。咨询电话：XXXXXXXX</p>
	</div>
</body>
</html>

但是，当我将这些代码融入到react环境中，大部分之前对的整整齐齐的栏变得扭扭歪歪，而且边框也消失了。直接告诉我是colspan这个属性没有起到作用。通过查阅资料，得到了如下答案。

• < table >标签不能直接和< tr >标签直接接触，在中间可以添加一个< tbody >标签
• < table >的border=1标签，要变成css属性是，给td标签添加css属性border:1px solid #000;
• colspan 在react中要变成colSpan这样的驼峰式写法
• 当然了，最重要的，colSpan拿到标签里面，<td colSpan="1">{name}</td>,width , height这两个属性倒是放到style里面或者标签里面都可以。

后续我还会写一篇使用antd中的row col来完成这一功能,使用这个功能会导致部分边框不重叠变粗的情况，文章中会附带解决方案。