使用table绘制电子回单

 

Tips

1、使用table完成表格时,要熟练应用colspan和rowspan进行变化

2、尽量使用css样式 不要用table自带的属性设置样式,容易发生莫名错误

效果:

使用table绘制电子回单

<style>
		table,table tr th, table tr td { border:1px solid #0094ff; }
		table {
			width: 50%;  text-align: center; border-collapse: collapse;
		}
</style>
<table  border="0">
		<tr>
			<th width="5%" rowspan="2">付<br/>款<br/>人</th>
			<td width="10%">姓名</td>
			<td width="35%">张三</td>
			<th width="5%" rowspan="2">收<br/>款<br/>人</th>
			<td width="10%">姓名</td>
			<td width="35%">李四</td>
		</tr>
		<tr>
			<td>地址</td>
			<td>北京市朝阳区国贸</td>
			<td>地址</td>
			<td>北京市朝阳区国贸</td>
		</tr>
		<tr>
			<td colspan="2">金额</td>
			<td>1000元</td>
			<td  rowspan="2">电<br/>子<br/>章</td>
			<td rowspan="2" colspan="2">1000元</td>
		</tr>
		<tr>
			<td colspan="2">金额</td>
			<td>1000元</td>
			
		</tr>
	</table>

  

使用table绘制电子回单

上一篇:STM32F103和STM32F401的ADC多通道采集DMA输出


下一篇:CoProcessFunction实战三部曲之一:基本功能