<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Simple invoice html template</title>
</head>

<body>

<style>

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,total,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}body{height:840px;width:592px;margin:auto;font-family:'Open Sans',sans-serif;font-size:12px}strong{font-weight:700}#container{position:relative;padding:4%}#header{height:80px}#header > #reference{float:right;text-align:right}#header > #reference h3{margin:0}#header > #reference h4{margin:0;font-size:85%;font-weight:600}#header > #reference p{margin:0;margin-top:2%;font-size:85%}#header > #logo{width:50%;float:left}#fromto{height:160px}#fromto > #from,#fromto > #to{width:45%;min-height:90px;margin-top:30px;font-size:85%;padding:1.5%;line-height:120%}#fromto > #from{float:left;width:45%;background:#efefef;margin-top:30px;font-size:85%;padding:1.5%}#fromto > #to{float:right;border:solid grey 1px}#items{margin-top:10px}#items > p{font-weight:700;text-align:right;margin-bottom:1%;font-size:65%}#items > table{width:100%;font-size:85%;border:solid grey 1px}#items > table th:first-child{text-align:left}#items > table th{font-weight:400;padding:1px 4px}#items > table td{padding:1px 4px}#items > table th:nth-child(2),#items > table th:nth-child(4){width:45px}#items > table th:nth-child(3){width:60px}#items > table th:nth-child(5){width:80px}#items > table tr td:not(:first-child){text-align:right;padding-right:1%}#items table td{border-right:solid grey 1px}#items table tr td{padding-top:3px;padding-bottom:3px;height:10px}#items table tr:nth-child(1){border:solid grey 1px}#items table tr th{border-right:solid grey 1px;padding:3px}#items table tr:nth-child(2) > td{padding-top:8px}#summary{height:170px;margin-top:30px}#summary #note{float:left}#summary #note h4{font-size:10px;font-weight:600;font-style:italic;margin-bottom:4px}#summary #note p{font-size:10px;font-style:italic}#summary #total table{font-size:85%;width:260px;float:right}#summary #total table td{padding:3px 4px}#summary #total table tr td:last-child{text-align:right}#summary #total table tr:nth-child(3){background:#efefef;font-weight:600}#footer{margin:auto;position:absolute;left:4%;bottom:4%;right:4%;border-top:solid grey 1px}#footer p{margin-top:1%;font-size:65%;line-height:140%;text-align:center}
body {
    height: 840px;
    width: 592px;
    margin: auto;
    font-family: 'Open Sans',sans-serif;
    font-size: 20px !important;
}
#items table tr td {
    padding-top: 3px;
    padding-bottom: 3px;
    height: 10px;
    font-size: 20px;
    font-weight: bold;
  
}
tbody, tr,th, td {
  border:1px solid black;
}
dd.{
	width: 100%;
}
dd.td{
	width:25%;
	padding: 4px;
  
}
tbody, tr, th, td {
    border: 1px solid black;
    padding: 10px;
    font-weight: bold;
}
#items > table tr td:not(:first-child) {
    text-align: center;
    padding-right: 1%;}
</style>




	<div id="header">
	 


		</div>
		<div id="reference">
		

		
		</div>
	</div>


<div>
	<caption>ok-</caption>
<table class="dd" width="100%">
	<tr>
		<td >BL N:22</td>
		<td >client<br>
		1222333
		</td>
			<td>LE:27/854/854</td>
		<td >hakiim</td>

	
	</tr>
</table>
</div>
	<div id="items">

		<table>
			<tr style="outline: thin solid">
				<th>Article</th>
				<th>NB</th>
			<th>Quantité</th>
					<th>Prix Unitaire</th>
				<th>Montana</th>
			</tr>
			
				<tr style="outline: thin solid">
		
				<td>fota sghira</td>
                
				<td style="width: 20%;font-size:14px;!important">riien a fairiien a faitt</td>
				<td>2</td>
                
				<td>230</td>
				<td>230</td>
			
			</tr>
            <tr style="outline: thin solid">
		
   
            <td>fotakbiira</td>
                
				<td>walit a fait</td>
				<td>2</td>
                
				<td>230</td>
                <td>230</td>
    
    </tr>
			<tr>
            <td></td>
            <td></td>
				<td >total</td>
				
				<td colspan="2">22</td>
			</tr>
			<tr>
            <td></td>
            <td></td>	
				<td colspan="3">mode de paement</td>
			
			
			</tr>
			<tr>
            <td></td>
            <td></td>
				<td >espece</td>
				
				<td style="color:red;" colspan="2">22 Dh</td>
			</tr>
			<tr>
				<td></td>
                <td></td>
				<td >Rest </td>
				
				<td style="color:red;" colspan="2">33 Dh</td>	
			
			</tr>
	
		</table>
	</div>






</body>
</html>