Make two tables side by side

Question

I can't place two tables side by side. I have tried using negative margin. If I float left, it does not display as intended when the html page is converted to pdf.

html,body{
	font-family: Arial;
	font-size:12px;
	margin:0;
    height:297mm;
    width:210mm;
}
.wrapper{
	margin: 10px 0 10px 0;	
}
.header{
	 width:100%;
	 height:100px;
}
.image{
	 float: left;
	 width:15%;
	 margin-left:5%;
	 height:100px;
	 width:100px;
}
.image img{
	margin-top:10px;
	height:99px;
	width:99px;
}
.headline{
	margin-top:15px;
	font-size:30px;
	font-weight:bold;
	float: left;
	width:100%;
	text-align: center;
}
.tagline{
	font-size:15px !important;
	font-weight: regular;
	font-style:italic;
	margin-top: 5px;
}
.table_wrapper{
	/*padding:0 5%;*/
	border: 2px solid #000;
	float:left;
	margin:15px;
}

.student_info table{
	width: 100%;
	height: 100px;
	/*float: left;*/
	padding: 15px;
	  
} 
.student_info table,.student_info th,.student_info td,
.remark table,.remark th,.remark td
{
    border: 0px solid #000 !important;
}

.subject{
	width:150px;
	margin-left: 20px;
	text-align: left;
}

.score{
	width:40px;
}

.remark{
	margin-bottom:30px;
	line-height:2;
}

.student_info table tr td img{
	height:100px;
	width:80px;
	float: right;
}

.tag_bold{
	font-weight: bold;
}
.chartz{
	padding: 5px;
	background-color: green;
}
.chartz table td{
	height:14px;	 
}
 .chartz table{
	height:20px;
	border-collapse: collapse;
}
.chartz table, th, td {
    border: 1px solid black;
}
.txt_rotate{
 	/*-ms-transform: rotate(-90deg); *//* IE 9 */
    /*-webkit-transform: rotate(-90deg);*/ /* Safari 3-8 */
    /*transform: rotate(-90deg);*/
	padding: 50px 0;
}
.mark_chart{
	/*float:left;*/
	padding-right: 10px;
	width: 50%;
	text-align:center;
	font-weight:bold;
	background-color: blue;
	margin-right: -800px;
}
.txt_colr{
	color: #5151FF;
}
.txt_colr_red{
	color:red;
}
.txt_colr_green{
	color: green;
}
.head_title{
	font-size: 8px;
	padding: 40px 0 !important;
}
.social_chart{
	width: 20%;
	margin-bottom: 5%;
	background-color: red;
	/*float: left;*/
	margin-right: -800px;
}
.social{
	padding:43px 0;
	text-align:center;
 }
.mark_chart table{
	width:100%;
}
.social_chart table{
	width:100%;
}
.habit_chart, .behaviour_chart, .class_chart{
	padding: 0 0 20px 0;
}
.remark{
	float: left;
	margin-left:2%;
	width:100%;
}
.remark table{
	width:90%;
}
.footer{
	width:100%;
	text-align:center;
	margin: 30px 0;
	font-weight: bold;
}

@media all {
	.page-break	{ display: block; page-break-before: always; }
}

@media print {
	.page-break	{ display: block; page-break-before: always; }
}

	
				
					
						 SUBJECT TITLE 1st Test 2nd Test Exam Score Total Score Letter Grade Subject Position Remark
						 10 20 70 100
						 COGNITIVE REPORT
						 
						 	
								 
								 
								 
								 
								 
								 
								 
								 
							
						 	
								 
								 
								 
								 
								 
								 
								 
								 
							
						 	
								 
								 
								 
								 
								 
								 
								 
								 
							
						 	
								 
								 
								 
								 
								 
								 
								 
								 
							
						 	
								 
								 
								 
								 
								 
								 
								 
								 
							
						 	
								 
								 
								 
								 
								 
								 
								 
								 
							
						 	
								 
								 
								 
								 
								 
								 
								 
								 
							
						 	
								 
								 
								 
								 
								 
								 
								 
								 
							
						 	
								 
								 
								 
								 
								 
								 
								 
								 
													  
							
				

				
					
						
								
									 SOCIAL BEHAVIOUR AND
 MANIPULATIVE SKILLS  
								
								Work Habit Ratings
								1. Creativity  
								2. Industrious  
								3. Work Independently  
								4. Follow Instructions  
								5. Neatness/Neat Work  
								6. Handwriting  
								7. Verbal Fluency  
								8. Work with Supervision  
								9. Class Participation  
								10. Work on time   
						
					

					
						
								Behaviour Ratings
								1. Honesty  
								2. Humility  
								3. Self Control  
								4. Politeness  
								5. Teachers Respect  
								6. Friendliness  
								7. Punctuality  
						
					
					
						
								Class Average
								Highest Class Average {{@$highAverage->average}}%  
								Lowest Class Average {{@$lowAverage->average}}%  			 
						
					
					
						
								School Resumes
								Sunday, 22 April, 2018

Navin Gelot · Accepted Answer

I am not sure but this might be the solution that you are looking for

You must have to increase size of the body and change float values in css along with the margins

	
.wrapper{
	margin: 10px 0 10px 0;	
}
.header{
	 width:100%;
	 height:100px;
}
.image{
	 float: left;
	 width:15%;
	 margin-left:5%;
	 height:100px;
	 width:100px;
}
.image img{
	margin-top:10px;
	height:99px;
	width:99px;
}
.headline{
	margin-top:15px;
	font-size:30px;
	font-weight:bold;
	float: left;
	width:100%;
	text-align: center;
}
.tagline{
	font-size:15px !important;
	font-weight: regular;
	font-style:italic;
	margin-top: 5px;
}
.table_wrapper{
	/*padding:0 5%;*/
	border: 2px solid #000;
	float:left;
	margin:15px;
}

.student_info table{
	width: 100%;
	height: 100px;
	/*float: left;*/
	padding: 15px;
	  
} 
.student_info table,.student_info th,.student_info td,
.remark table,.remark th,.remark td
{
    border: 0px solid #000 !important;
}

.subject{
	width:150px;
	margin-left: 20px;
	text-align: left;
}

.score{
	width:40px;
}

.remark{
	margin-bottom:30px;
	line-height:2;
}

.student_info table tr td img{
	height:100px;
	width:80px;
	float: right;
}

.tag_bold{
	font-weight: bold;
}
.chartz{
	padding: 5px;
	width: 100%;
}
.chartz table td{
	height:14px;	 
}
 .chartz table{
	height:20px;
	border-collapse: collapse;
}
.chartz table, th, td {
    border: 1px solid black;
}
.txt_rotate{
 	/*-ms-transform: rotate(-90deg); *//* IE 9 */
    /*-webkit-transform: rotate(-90deg);*/ /* Safari 3-8 */
    /*transform: rotate(-90deg);*/
	padding: 50px 0;
}
.mark_chart{
	/*float:left;*/
	float: left;
	width: 50%;
	text-align:center;
	font-weight:bold;
	background-color: blue;
	margin-right: -800px;
}
.txt_colr{
	color: #5151FF;
}
.txt_colr_red{
	color:red;
}
.txt_colr_green{
	color: green;
}
.head_title{
	font-size: 8px;
	padding: 40px 0 !important;
}
.social_chart{
	width: 50%;
	margin-bottom: 5%;
	background-color: red;
	float: left;
	margin-left: 50%;
}
.social{
	padding:43px 0;
	text-align:center;
 }
.mark_chart table{
	width:100%;
}
.social_chart table{
	width:100%;
}
.habit_chart, .behaviour_chart, .class_chart{
	padding: 0 0 20px 0;
}
.remark{
	float: left;
	margin-left:2%;
	width:100%;
}
.remark table{
	width:90%;
}
.footer{
	width:100%;
	text-align:center;
	margin: 30px 0;
	font-weight: bold;
}

@media all {
	.page-break	{ display: block; page-break-before: always; }
}

@media print {
	.page-break	{ display: block; page-break-before: always; }
}




	


	
				
					
						 SUBJECT TITLE 1st Test 2nd Test Exam Score Total Score Letter Grade Subject Position Remark
						 10 20 70 100
						 COGNITIVE REPORT
						 
						 	
								 
								 
								 
								 
								 
								 
								 
								 
							
						 	
								 
								 
								 
								 
								 
								 
								 
								 
							
						 	
								 
								 
								 
								 
								 
								 
								 
								 
							
						 	
								 
								 
								 
								 
								 
								 
								 
								 
							
						 	
								 
								 
								 
								 
								 
								 
								 
								 
							
						 	
								 
								 
								 
								 
								 
								 
								 
								 
							
						 	
								 
								 
								 
								 
								 
								 
								 
								 
							
						 	
								 
								 
								 
								 
								 
								 
								 
								 
							
						 	
								 
								 
								 
								 
								 
								 
								 
								 
													  
							
				

				
					
						
								
									 SOCIAL BEHAVIOUR AND
 MANIPULATIVE SKILLS  
								
								Work Habit Ratings
								1. Creativity  
								2. Industrious  
								3. Work Independently  
								4. Follow Instructions  
								5. Neatness/Neat Work  
								6. Handwriting  
								7. Verbal Fluency  
								8. Work with Supervision  
								9. Class Participation  
								10. Work on time   
						
					

					
						
								Behaviour Ratings
								1. Honesty  
								2. Humility  
								3. Self Control  
								4. Politeness  
								5. Teachers Respect  
								6. Friendliness  
								7. Punctuality  
						
					
					
						
								Class Average
								Highest Class Average {{@$highAverage->average}}%  
								Lowest Class Average {{@$lowAverage->average}}%  			 
						
					
					
						
								School Resumes
								Sunday, 22 April, 2018

It's too large your code to read.

But ensure that you have structured your table correctly.

try with bellow structure and apply CSS where ever necessary :)





	
		
			
				
					Table-1
				
				
					td-1
					td-2
					td-3
					td-4
				
				
					td-5
					td-6
					td-7
					td-8
				
			
		
		

		
			
				
					Table-2
				
				
					td-1
					td-
					td-3
					td-4
				
				
					td-5
					td-6
					td-7
					td-8

Make two tables side by side

Answers (2)

Related Questions