代码之家 › 专栏 › 技术社区 › BlackPearl

并排做两张桌子

css3 html5

0

BlackPearl · 技术社区 · 6 年前

我不能把两张桌子并排放。我试过使用负边距。如果我向左浮动,当html页面转换为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; }
}

	<div class="chartz">
				<div class="mark_chart">
					<table>
						 <tr style="font-weight: bold;"><td rowspan="2" class="head_title"><h1>SUBJECT TITLE</h1></td><td class="txt_rotate">1st Test</td><td class="txt_rotate">2nd Test</td><td class="txt_rotate">Exam Score</td><td class="txt_rotate">Total Score</td><td rowspan="2" class="txt_rotate">Letter Grade</td><td rowspan="2" class="txt_rotate">Subject Position</td><td class="head_title" rowspan="2"><h3>Remark</h3></td></tr>
						 <tr style="font-weight: bold;" ><td>10</td><td>20</td><td>70</td><td>100</td></tr>
						 <tr><td colspan="8">COGNITIVE REPORT</td></tr>
						 
						 	<tr>
								<td class="subject">&nbsp;</td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr_green"><strong>&nbsp;</strong></td>
								<td class="txt_colr_red"><strong>&nbsp;</strong></td>
							</tr>
						 	<tr>
								<td class="subject">&nbsp;</td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr_green"><strong>&nbsp;</strong></td>
								<td class="txt_colr_red"><strong>&nbsp;</strong></td>
							</tr>
						 	<tr>
								<td class="subject">&nbsp;</td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr_green"><strong>&nbsp;</strong></td>
								<td class="txt_colr_red"><strong>&nbsp;</strong></td>
							</tr>
						 	<tr>
								<td class="subject">&nbsp;</td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr_green"><strong>&nbsp;</strong></td>
								<td class="txt_colr_red"><strong>&nbsp;</strong></td>
							</tr>
						 	<tr>
								<td class="subject">&nbsp;</td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr_green"><strong>&nbsp;</strong></td>
								<td class="txt_colr_red"><strong>&nbsp;</strong></td>
							</tr>
						 	<tr>
								<td class="subject">&nbsp;</td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr_green"><strong>&nbsp;</strong></td>
								<td class="txt_colr_red"><strong>&nbsp;</strong></td>
							</tr>
						 	<tr>
								<td class="subject">&nbsp;</td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr_green"><strong>&nbsp;</strong></td>
								<td class="txt_colr_red"><strong>&nbsp;</strong></td>
							</tr>
						 	<tr>
								<td class="subject">&nbsp;</td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr_green"><strong>&nbsp;</strong></td>
								<td class="txt_colr_red"><strong>&nbsp;</strong></td>
							</tr>
						 	<tr>
								<td class="subject">&nbsp;</td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr_green"><strong>&nbsp;</strong></td>
								<td class="txt_colr_red"><strong>&nbsp;</strong></td>
							</tr>						  
					</table>		
				</div>

				<div class="social_chart">
					<div class="habit_chart">
						<table>
								<tr class="tag_bold head_title">
									<td colspan="2" class="social"> <strong>SOCIAL BEHAVIOUR AND<br> MANIPULATIVE SKILLS</strong>  </td>
								</tr>
								<tr class="tag_bold"><td>Work Habit</td><td>Ratings</td></tr>
								<tr><td>1. Creativity</td><td></td> </tr>
								<tr><td>2. Industrious </td><td></td> </tr>
								<tr><td>3. Work Independently</td><td></td> </tr>
								<tr><td>4. Follow Instructions</td><td></td> </tr>
								<tr><td>5. Neatness/Neat Work</td><td></td> </tr>
								<tr><td>6. Handwriting</td><td></td> </tr>
								<tr><td>7. Verbal Fluency</td><td></td> </tr>
								<tr><td>8. Work with Supervision</td><td></td> </tr>
								<tr><td>9. Class Participation</td><td></td> </tr>
								<tr><td>10. Work on time</td><td></td> </tr> 
						</table>
					</div>

					<div class="behaviour_chart">
						<table>
								<tr class="tag_bold"><td>Behaviour</td><td>Ratings</td></tr>
								<tr><td>1. Honesty</td><td></td> </tr>
								<tr><td>2. Humility </td><td></td> </tr>
								<tr><td>3. Self Control</td><td></td> </tr>
								<tr><td>4. Politeness</td><td></td> </tr>
								<tr><td>5. Teachers Respect</td><td></td> </tr>
								<tr><td>6. Friendliness</td><td></td> </tr>
								<tr><td>7. Punctuality</td><td></td> </tr>
						</table>
					</div>
					<div class="class_chart">
						<table>
								<tr class="tag_bold"><td colspan="2">Class Average</td></tr>
								<tr><td>Highest Class Average</td><td class="txt_colr_green">{{@$highAverage->average}}%</td> </tr>
								<tr><td>Lowest Class Average</td><td class="txt_colr_red">{{@$lowAverage->average}}%</td> </tr>			 
						</table>
					</div>
					<div class="resume_chart">
						<table >
								<tr class="tag_bold"><td colspan="2" style="text-align: center;">School Resumes</td></tr>
								<tr><td colspan="2" style="text-align:center;">Sunday, 22 April, 2018</td> </tr>
								 
						</table>
					</div>
				</div>
			</div>

2 回复 | 直到 6 年前

1

Navin Gelot 6 年前

我不确定,但这可能是您正在寻找的解决方案

您必须增加主体的大小,并更改css中的浮点值以及边距

	
.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; }
}

<html>

<head>
	<style>
html,body{
	font-family: Arial;
	font-size:12px;
	margin:0;
    height:100%;
    width:100%;
    
}
	</style>
</head>
<body>
	<div class="chartz">
				<div class="mark_chart">
					<table>
						 <tbody><tr style="font-weight: bold;"><td rowspan="2" class="head_title"><h1>SUBJECT TITLE</h1></td><td class="txt_rotate">1st Test</td><td class="txt_rotate">2nd Test</td><td class="txt_rotate">Exam Score</td><td class="txt_rotate">Total Score</td><td rowspan="2" class="txt_rotate">Letter Grade</td><td rowspan="2" class="txt_rotate">Subject Position</td><td class="head_title" rowspan="2"><h3>Remark</h3></td></tr>
						 <tr style="font-weight: bold;"><td>10</td><td>20</td><td>70</td><td>100</td></tr>
						 <tr><td colspan="8">COGNITIVE REPORT</td></tr>
						 
						 	<tr>
								<td class="subject">&nbsp;</td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr_green"><strong>&nbsp;</strong></td>
								<td class="txt_colr_red"><strong>&nbsp;</strong></td>
							</tr>
						 	<tr>
								<td class="subject">&nbsp;</td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr_green"><strong>&nbsp;</strong></td>
								<td class="txt_colr_red"><strong>&nbsp;</strong></td>
							</tr>
						 	<tr>
								<td class="subject">&nbsp;</td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr_green"><strong>&nbsp;</strong></td>
								<td class="txt_colr_red"><strong>&nbsp;</strong></td>
							</tr>
						 	<tr>
								<td class="subject">&nbsp;</td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr_green"><strong>&nbsp;</strong></td>
								<td class="txt_colr_red"><strong>&nbsp;</strong></td>
							</tr>
						 	<tr>
								<td class="subject">&nbsp;</td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr_green"><strong>&nbsp;</strong></td>
								<td class="txt_colr_red"><strong>&nbsp;</strong></td>
							</tr>
						 	<tr>
								<td class="subject">&nbsp;</td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr_green"><strong>&nbsp;</strong></td>
								<td class="txt_colr_red"><strong>&nbsp;</strong></td>
							</tr>
						 	<tr>
								<td class="subject">&nbsp;</td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr_green"><strong>&nbsp;</strong></td>
								<td class="txt_colr_red"><strong>&nbsp;</strong></td>
							</tr>
						 	<tr>
								<td class="subject">&nbsp;</td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr_green"><strong>&nbsp;</strong></td>
								<td class="txt_colr_red"><strong>&nbsp;</strong></td>
							</tr>
						 	<tr>
								<td class="subject">&nbsp;</td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr"><strong>&nbsp;</strong></td>
								<td class="txt_colr_green"><strong>&nbsp;</strong></td>
								<td class="txt_colr_red"><strong>&nbsp;</strong></td>
							</tr>						  
					</tbody></table>		
				</div>

				<div class="social_chart">
					<div class="habit_chart">
						<table>
								<tbody><tr class="tag_bold head_title">
									<td colspan="2" class="social"> <strong>SOCIAL BEHAVIOUR AND<br> MANIPULATIVE SKILLS</strong>  </td>
								</tr>
								<tr class="tag_bold"><td>Work Habit</td><td>Ratings</td></tr>
								<tr><td>1. Creativity</td><td></td> </tr>
								<tr><td>2. Industrious </td><td></td> </tr>
								<tr><td>3. Work Independently</td><td></td> </tr>
								<tr><td>4. Follow Instructions</td><td></td> </tr>
								<tr><td>5. Neatness/Neat Work</td><td></td> </tr>
								<tr><td>6. Handwriting</td><td></td> </tr>
								<tr><td>7. Verbal Fluency</td><td></td> </tr>
								<tr><td>8. Work with Supervision</td><td></td> </tr>
								<tr><td>9. Class Participation</td><td></td> </tr>
								<tr><td>10. Work on time</td><td></td> </tr> 
						</tbody></table>
					</div>

					<div class="behaviour_chart">
						<table>
								<tbody><tr class="tag_bold"><td>Behaviour</td><td>Ratings</td></tr>
								<tr><td>1. Honesty</td><td></td> </tr>
								<tr><td>2. Humility </td><td></td> </tr>
								<tr><td>3. Self Control</td><td></td> </tr>
								<tr><td>4. Politeness</td><td></td> </tr>
								<tr><td>5. Teachers Respect</td><td></td> </tr>
								<tr><td>6. Friendliness</td><td></td> </tr>
								<tr><td>7. Punctuality</td><td></td> </tr>
						</tbody></table>
					</div>
					<div class="class_chart">
						<table>
								<tbody><tr class="tag_bold"><td colspan="2">Class Average</td></tr>
								<tr><td>Highest Class Average</td><td class="txt_colr_green">{{@$highAverage-&gt;average}}%</td> </tr>
								<tr><td>Lowest Class Average</td><td class="txt_colr_red">{{@$lowAverage-&gt;average}}%</td> </tr>			 
						</tbody></table>
					</div>
					<div class="resume_chart">
						<table>
								<tbody><tr class="tag_bold"><td colspan="2" style="text-align: center;">School Resumes</td></tr>
								<tr><td colspan="2" style="text-align:center;">Sunday, 22 April, 2018</td> </tr>
								 
						</tbody></table>
					</div>
				</div>
			</div>

</body>
</html>

你的代码太大了,读不懂。

但要确保你的桌子结构正确。

CSS 必要时:)

<html>
<body>

<table border="1" cellspacing="0">
	<tr>
		<td>
			<table border="1" cellspacing="0">
				<tr>
					<th>Table-1</th>
				</tr>
				<tr>
					<td>td-1</td>
					<td>td-2</td>
					<td>td-3</td>
					<td>td-4</td>
				</tr>
				<tr>
					<td>td-5</td>
					<td>td-6</td>
					<td>td-7</td>
					<td>td-8</td>
				</tr>
			</table>
		</td>
		

		<td>
			<table border="1" cellspacing="0">
				<tr>
					<th>Table-2</th>
				</tr>
				<tr>
					<td>td-1</td>
					<td>td-</td>
					<td>td-3</td>
					<td>td-4</td>
				</tr>
				<tr>
					<td>td-5</td>
					<td>td-6</td>
					<td>td-7</td>
					<td>td-8</td>
				</tr>
			</table>
		</td>

	</tr>
<table>	
</body>
</html>

2

0

krishna_tandon 6 年前

根据你的密码,

显示:flex;

这样不仅可以使桌子彼此平行,还可以调整高度。